向下滚动时如何使header和导航栏都固定在顶部

Question

向下滚动时如何使导航栏低于并靠近 Header 栏？目前导航条覆盖了header。这是我到目前为止所取得的成就，请检查this JSFiddle并帮助我修复它。

这是我的 css 到目前为止，我在 header 栏上：

position: fixed;
width:100%;
height: 50px;
background-color: chartreuse;
text-align: center;

Answer 1

我想这就是你想要的：https://jsfiddle.net/cCrul/ks1chdab/4/

我刚刚将 #navbar.fixed 中的 top: 0; 更改为 50px:

#navbar.fixed {
    ...
    top: 50px;
    ...
}

var stickyNavTop = $('#navbar').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > stickyNavTop) {
        $('#navbar').addClass('fixed');
    }
    else {
        $('#navbar').removeClass('fixed');
    }  
});

*{
 margin: 0;
 padding: 0;
}

body{
 min-height: 100%;
 background-color: #aaaabb;
}

#header {
  position: fixed;
  width:100%;
    height: 50px;
    background-color: chartreuse;
    text-align: center;
}

#navbar{
 -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

#navbar.fixed{
    background-color: #FFFFFF;
    left: 0;
    position: fixed;
    top: 50px;
    width: 100%;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #000;
}

#navbar ul,
#footer ul {
 list-style: none;
 text-align: center;
 padding-bottom: 15px;
}

#navbar ul li,
#footer ul li{
 display: inline-block;
}

#navbar li a.nav-active{
 color: #1F2ED1;
}

#navbar ul li a,
#footer ul li a{
 text-decoration: none;
 padding: 8px;
 text-transform: uppercase;
 color: #cecece;
 display: block;
}

.body-wrapper{
 width: 960px;
 margin: 0 auto;
}

.section{
 margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"><h2>HEADER IMAGE</h2></div>
<img src="http://lorempixel.com/960/450" />
<div id="navbar">
  <ul>
   <li><a href="#home-section" class="nav-active">Home</a></li>
   <li><a href="#about-section">About</a></li>
   <li><a href="#products-section">Products</a></li>
   <li><a href="#contact-section">Contact</a></li>
  </ul>
 </div>
 <div class="body-wrapper">
  <div id="home-section" class="section">
   <h3>Home heading</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="about-section" class="section">
   <h3>About heading</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="products-section" class="section">
   <h3>Products heading</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="contact-section" class="section">
   <h3>Contact heading</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
 </div>
 <div id="footer">
  <ul>
   <li>&#169; Test</li>
   <li><a href="">Terms</a></li>
   <li><a href="">Privacy</a></li>
  </ul>
 </div>

Answer 2

您只能使用 CSS postion: sticky（而不是 js）。例如：

.element {
   position: sticky;
   top: 10px;
}

JSFiddle

MDN - postion - CSS

Can I use - browsers support for postion: sticky

向下滚动时如何使header和导航栏都固定在顶部

How do I make the header and naviation bar both fixed at the top when scrolling down

css

jquery

navigationbar