菜單欄固定在頁面頂部，當滾動導致下面的內容在滾動期間跳躍

我試圖讓一個子菜單停留在頁面的頂部，同時滾動一次它在滾動期間到達頂部。以下是我迄今爲止：菜單欄固定在頁面頂部，當滾動導致下面的內容在滾動期間跳躍

$(window).scroll(function() {  
    if ($(window).scrollTop() > 175) { 
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000'); 
$('.first').css('padding-top','415');} 
    else { 
$('#location_menu').css('position', 'relative').css('z-index','1'); 
}});

我遇到的問題是，滾動不順暢，一旦從位置上的元素變化：相對於位置：固定的內容似乎跳/約跳過了415px與子菜單高度相同。

這裏是CSS：

<div id="location_menu" >submenu content 
</div> 

<div id="content" class="location_detail first">content beneath submenu 
</div>

我已經添加了.first行至有415px填充頂頁面時crolling和內頁.css('padding-top','415')這並未頂部的175px達到實際上似乎沒有做任何事情。沒有改變，所以我認爲我錯誤地執行了它。

我應該使用不同的滾動功能，然後我已經在上面列出？

這裏是我結束了使用，以解決我的問題，從@Danko基於斷碼：

$(window).scroll(function() { 
    var $conten = $('.first'), 
     $menu = $('#location_menu') 
     scrollpos = $(window).scrollTop(); 
    if (scrollpos >= 175) { 
     $conten.css('padding-top','365px'); 
     $menu.css('position', 'fixed').css('top','0px').css('z-index','1000'); 
    } else { 
     $conten.css('padding-top','0'); 
     $menu.css('position', 'fixed').css('position', 'relative').css('z-index','1'); 
    } 
});

來源

2013-10-24 rileychuggins

編輯

現在好了，我理解這個問題，我做了這個演示http://codepen.io/anon/pen/BdkLf。

其實功能是這樣的：

$(window).scroll(function() { 
    var $menu = $('#location_menu'), 
     $conten = $('#content'), 
     scrollpos = $(window).scrollTop(); 
    if (scrollpos >= 175) { 
     $menu.css({ 
     "top" : "0", 
     "position": "fixed", 
     }); 
     $conten.css('top','375px'); 
    } else { 
     $menu.css({ 
     "position": "relative", 
     "top" : "175px", 
     }); 
     $conten.css('top','175px'); 
    } 
});

這裏175是等於從頂部和375初始距離和距離的增加你的菜單的height

來源

2013-10-24 19:21:19 DaniP

菜單欄固定在頁面頂部，當滾動導致下面的內容在滾動期間跳躍

回答

相關問題