浮動菜單固定

Question

我想創建一個浮動菜單，在滾動時將保持最佳狀態。我找到了一些例子，並能夠複製它們，現在它可以工作。 然而問題在於，正如您在示例中所看到的那樣，當滾動時，滾動「跳轉」時菜單下方的文本很難解釋我的意思，但如果您看它，您會立即看看問題是什麼。任何人都可以幫我解決這個問題嗎？

Answer 1

添加.sectionHeading動態餘量：頂部等於菜單的高度，與觸發所述固定類的同一事件。

Answer 2

您需要在試用和錯誤的基礎上做到這一點。你需要改變一個靜態的父親。檢查這個例子，並按照它。

片段

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 125) 
 
     $("body").addClass("fixed"); 
 
    else 
 
     $("body").removeClass("fixed"); 
 
    }); 
 
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} 
 
h1, h2 {font-weight: normal;} 
 
h1 {font-size: 1.5em;} 
 
h2 {font-size: 1.25em;} 
 
h1, h2, p {margin: 0 0 15px;} 
 
.fixed {padding-top: 42px;} 
 
.fixed .static {position: fixed; top: 0; width: 100%; background: #fff; padding-bottom: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h1>Static Header Example</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque inventore laudantium quod, vel pariatur dolore obcaecati veniam aspernatur aliquam ad dolorum possimus illo facilis et totam nam unde, sint?</p> 
 
<h2 class="static">This is gonna be Static!</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p>

Answer 3

當您將菜單的類別從default更改爲fixed時，由於您更改了菜單的display，文檔的高度會減少菜單的高度。

的解決方案是，當你從default更改類的菜單來fixed可以將部分padding添加到您的文檔的body（菜單元素的高度是好的），並改變類的菜單的時候刪除padding從fixed到default。

$(function(){ 
    var menu = $('#menu'), 
    pos = menu.offset(); 
    $(window).scroll(function(){ 
     if($(this).scrollTop() > pos.top && menu.hasClass('default')){ 
      menu.hide(1, function(){ 
       $(this).removeClass('default').addClass('fixed').show(1); 
       $('body').css('padding-top', '111px'); 
      }); 
     } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ 
      menu.hide(1, function(){ 
       $(this).removeClass('fixed').addClass('default').show(1); 
       $('body').css('padding-top', '0'); 
      }); 
     } 
    }); 
}); 

Answer 4

您可以添加其他的div喜歡你的菜單，但與class="fixed"和display: none，當滾動到達頁面的頂部，可以顯示該分區，並從visible改變#menu的知名度，hidden。