在滾動期間鎖定窗口頂部的對象

我有一個對象位於頁面的頂部，當用戶滾動到某個點時，我想鎖定到窗口的頂部。我有這個到目前爲止工作好，但它有點跳動。我的意思是跳躍，它不會移動，直到用戶滾動到目前爲止，然後它跳到我想鎖定對象的點。而當我滾動時，div每次移動滾動條時都會上下跳動。在滾動期間鎖定窗口頂部的對象

這是我到目前爲止有：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 165) { 
     $('#nav_bar').css('top', parseInt($(window).scrollTop() - 165)); 
    }else{ 
     $('#nav_bar').css('top', parseInt($(window).scrollTop())); 
    } 
} 
); 



.nav{ 
    position:relative; 
    height:25px; 
    width:750px; 
    margin-top:165px; 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
    text-align:center; 
} 
.nav div{ 
    display:inline-block; 
    height:25px; 
} 
.nav div div{ 
    float:left; 
    height:25px; 
    text-align:center; 
    display:table-cell; 
    vertical-align:bottom; 
    width:auto; 
    margin-left:10px; 
    margin-right:10px; 
    padding-left:5px; 
    padding-right:5px; 
    line-height:25px; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    color:rgba(11,108,138,1.00); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

這是我第一次這樣做了，所以我敢肯定，如果我能幫助跳躍時，每一次頁面滾動，但我所看到的這在其他網站上運行非常順利。但是我明白，div（頭部）應該隨頁面一起滾動，直到達到該點，然後完全停止在頁面的頂部。

來源

2014-06-05 Paul Ledger

http://jsfiddle.net/ –

position：fixed; – Bart

繼承人一小提琴 http://jsfiddle.net/rD497/ –

Headroom.js

這個插件處理這些情況和它的作品。我建議你嘗試一下。它是開源的，所以如果你在實現它時發現任何問題，你也可以爲它做出貢獻。

如果你不想使用headroom.js，我會創建另一個與你正在修復的div高度相等的div，除非我將「display：none」作爲CSS規則添加到它。然後，在您的JS邏輯中，您可以在修復導航時顯示它，並在解開導航時再次隱藏它。

或者你可以在父元素中添加一個等於固定導航高度的填充。

 if (viewport.scrollTop() > 148) { 
      header.css('position', 'fixed').addClass('compressed'); 
      section.css('padding-top', 148); 
     } else { 
      header.css('position', 'relative').removeClass('compressed'); 
      section.css('padding-top', 0); 
     }

其中「標題」，「部分」和「視口」是應該用$（''）定義的變量。

讓我知道你是否需要別的東西。

來源

2014-06-05 14:19:58 Elemenofi

在滾動期間鎖定窗口頂部的對象

回答

相關問題