更改导航类用户滚动

Question

/转换我有我要在以下方式发挥功能的导航栏：

• 导航定位绝对的，因此它可以与内容的其余部分滚动。
• 从它变得固定和向下转变从顶部的顶部滚动300像素时离屏
• 当滚动备份它离屏和滚动回落向上转变为内容的一部分

代码（在functions.php的）

$(document).ready(function() { 

    $(window).scroll(function() { 
    var bannerHeight = $('#s-nav').height(); 
    console.log(bannerHeight); 
    if ($(window).scrollTop() > bannerHeight) { 
    $('#s-nav').addClass('stick'); 
    } 
    if ($(window).scrollTop() < bannerHeight) { 
    $('#s-nav').removeClass('stick'); 
    } 
    }); 
}); 

CSS

#s-nav { 
    width: 100%; 
    top: 0; right: 0; left: 0; 
    position: absolute; 
} 

#s-nav.stick { 
    position: fixed; 
    top: 0; left: 0; right: 0; 
    z-index: 999; 
} 

HTML

<nav id="s-nav"> navigation links </div> 

Answer 1

您不能有position: absolute元素卷轴，因为它需要是相对于内容，以便能够滚动。

只要保证你使用position: relative，并使用300值在scrollTop()检查你比较的时候：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 300) { 
 
     $('#s-nav').addClass('stick'); 
 
    } 
 
    if ($(window).scrollTop() < 300) { 
 
     $('#s-nav').removeClass('stick'); 
 
    } 
 
    }); 
 
});

#s-nav { 
 
    position: relative; 
 
    background: cyan; /* For clarity */ 
 
} 
 

 
#s-nav.stick { 
 
    position: fixed; 
 
    top: 0; left: 0; right: 0; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="s-nav"> 
 
Sticky 
 
</div> 
 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tellus justo. Phasellus sollicitudin nisl pellentesque tincidunt consequat. Cras pellentesque quis turpis ac ultricies. Curabitur tincidunt sapien eget elit faucibus vestibulum. Nulla feugiat tempor magna, vitae aliquet sapien pretium vel. Nullam dapibus sagittis diam, at mattis ipsum congue sit amet. Suspendisse pulvinar nulla in dui hendrerit, at porta turpis consectetur. Quisque fermentum augue a libero posuere, at commodo odio porttitor. Mauris a dui at augue sollicitudin mattis. Vestibulum luctus interdum nisi, ac aliquet enim tristique sed. Etiam blandit massa risus, vel semper ligula ultricies non. Vivamus suscipit augue vel congue ultricies. Donec ac ipsum lacinia, commodo enim vitae, dignissim sem. Proin scelerisque feugiat sem, eu elementum orci viverra nec. Proin tincidunt eleifend lorem scelerisque pulvinar. 
 
Morbi varius lacinia lacinia. Vivamus facilisis ornare justo, in porttitor ipsum pulvinar id. Sed rutrum, ante et consequat scelerisque, nulla sem cursus lacus, non convallis massa justo in velit. Ut porttitor fermentum augue, non rhoncus sem semper eu. Curabitur id semper mauris. Pellentesque sit amet diam vel mauris blandit euismod sit amet ac magna. In sodales iaculis magna nec viverra. 
 
Fusce congue urna sed nisi efficitur aliquet. Duis augue metus, aliquam lobortis ultrices laoreet, pulvinar in arcu. Suspendisse feugiat ex velit, ut elementum nisi luctus id. Cras condimentum sapien nec ante interdum, at tempus lorem gravida. Curabitur porttitor eros massa, vel varius turpis accumsan a. Sed porttitor convallis odio, vitae dapibus eros venenatis ut. Donec scelerisque metus molestie erat bibendum condimentum. 
 
Nullam porttitor semper aliquam. Mauris volutpat augue ac diam tincidunt, at ullamcorper sapien laoreet. Nunc porta bibendum lacus imperdiet luctus. Proin ac massa commodo, egestas dui vehicula, bibendum arcu. Vivamus sed pulvinar nisi. Duis orci lectus, pulvinar sed consequat eget, vulputate at turpis. Praesent laoreet ligula nunc, id sollicitudin nisl volutpat sit amet. Vestibulum quis porttitor eros. Praesent in turpis justo. Vivamus pharetra porttitor neque quis maximus. Vestibulum ut euismod nisi. Aenean sit amet accumsan magna. Vestibulum dictum, augue quis commodo dapibus, nibh elit auctor arcu, id tempus libero diam non justo. 
 
Maecenas urna leo, vehicula in turpis non, maximus mattis enim. Fusce sit amet est rutrum, posuere velit in, iaculis nunc. Fusce malesuada at felis a tincidunt. Nam maximus dictum vestibulum. Sed scelerisque eget nibh eget suscipit. Nulla lacus diam, tristique et justo quis, venenatis suscipit arcu. Etiam vestibulum at libero quis eleifend. 
 
</p>

希望这有助于！ :)