Question

我正在尝试让子菜单停留在页面顶部，同时在滚动期间滚动到达顶部。以下是我到目前为止的情况：

$(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，并且达到页面顶部的175px .css('padding-top','415')这实际上似乎不是做任何事情。没有变化，所以我认为我已经错误地执行了它。

我应该使用不同的滚动功能，然后我在上面列出了吗？

根据@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');
  }
});

Answer 1

修改

好了，我理解了这个问题，我做了这个演示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之间的加法

滚动时，菜单栏固定在页面顶部，导致下方内容在滚动期间跳转

1 个答案: