更改導航類用戶滾動

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>

希望這有助於！ :)