菜单栏固定在页面顶部，当滚动导致下面的内容在滚动期间跳跃

我试图让一个子菜单停留在页面的顶部，同时滚动一次它在滚动期间到达顶部。以下是我迄今为止：菜单栏固定在页面顶部，当滚动导致下面的内容在滚动期间跳跃

$(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

菜单栏固定在页面顶部，当滚动导致下面的内容在滚动期间跳跃

回答

相关问题