jQuery捕捉/固定菜單寬度更改和跳轉當滾動過去某些點

Question

我有一個水平導航我會鎖定固定到頁面的頂部時，導航的頂部屬性是在頁面的頂部。但是，當導航到達頁面的頂部時，它會增加寬度，並且會變得很麻煩。一旦我進一步向下滾動，這種現象就會停止。請注意，滾動備份時會發生同樣的情況。換句話說，當nav的頂部到達頁面的頂部時，發生寬度變化跳躍的事情。

鏈接到下面的小提琴。我試圖儘可能地添加代碼，但是SO正在抱怨。

jsfiddle

HTML

<div id="container"> 
    <div class="phone-number"> 
    ... 
    </div> 
    <div id="phone-sub-text"> 
     ... 
    </div> 
    <div id="social-media"> 
     <div> 
      <img id="fb-icon" src="img/fb-rect.jpg"/> 
      <img src="img/twitter-rect.jpg"/> 
     </div> 
    </div> 
    <h1> 
    ... 
    </h1> 
     <div id="float-nav-bar"></div> 
     <div id="main"> 
      <header> 
       ... 
      </header> 
      <header class="sub-header"> 
       ... 
      </header> 
      <div id="main-content-top" class="main-content"> 
       <section> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
       </section> 
       <figure> 
        <img src="#" /> 
       </figure> 
      </div> 
      <header> 
       ... 
      </header> 
      <header class="sub-header"> 
       ... 
      </header> 
      <div id="main-content-bottom" class="main-content"> 
       <section> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ... 
        <br/> 
        ...      
       </section> 
       <figure> 
        <img src="#"> 
       </figure> 
      </div> 
     </div> 

     <footer class="container-footer"> 

     </footer> 
</div> 
</body> 
</html> 

的JavaScript

$(document).ready(function() { 

    var topOfNav = $('#float-nav-bar').offset().top; 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > topOfNav){ 

      $('#float-nav-bar').addClass('fixed'); 
     } 
     else 
     { 

      $('#float-nav-bar').removeClass('fixed'); 
     } 
    }); 
}); 

CSS

#container { 
    width: 75%; 
    margin: auto; 
} 

h1, h2, h3{ 
    text-align: center; 
    font-family: arial; 
} 

h1 { 
    font-size: 36pt; 
    margin: 0; 
} 

h1 a { 
    color: inherit; 
    text-decoration: none; 
} 

section { 
    width: 60%; 
    margin-top: 10px; 
} 

header { 
    margin-top: 10px; 
    font-size: 20pt; 
    color: rgb(0, 64, 135); 
} 

.container-footer { 
    height: 100px; 
    background-color: rgb(0, 137, 96); 
    margin-top: 40px; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
    width: inherit; 
} 

#float-nav-bar { 
    height: 100px; 
    background-color: #ccc; 
} 

Answer 1

跳躍是變化高度在滾動事件崩潰的經典案例。當滾動將該元素從正常文檔流中移出時，使導航欄position: fixed減小文檔的高度，該文檔將文檔重新滾動回來，從而將導航欄踢回正常位置。您仍然一直在滾動，所以循環反覆運行，導致跳躍。修復相當簡單：插入一個佔位符，當導航欄被修復時，該佔位符將填充該空間。

HTML：

<div id="nav-bar-placeholder" class="float-nav-bar"></div> 
<div id="float-nav-bar" class="float-nav-bar"></div> 

CSS：

.float-nav-bar { 
    height: 100px; 
} 

#float-nav-bar { 
    background-color: #ccc; 
} 

#nav-bar-placeholder { 
    display: none; 
} 

的JavaScript：

$(window).scroll(function() { 
    if ($(this).scrollTop() > topOfNav){ 
     $('#nav-bar-placeholder').show(); 
     $('#float-nav-bar').addClass('fixed'); 
    } 
    else 
    { 
     $('#nav-bar-placeholder').hide(); 
     $('#float-nav-bar').removeClass('fixed'); 
    } 
}); 

看到這個的jsfiddle一個完整的工作示例：http://jsfiddle.net/wdgcbnkm/。