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

Posted 2023-03-12

【中文标题】滚动时固定在页面顶部的菜单栏导致下面的内容在滚动期间跳转

【英文标题】：Menu bar fixed at top of the page when scrolling is causing content underneath to jump during scroll

【发布时间】：2013-10-24 19:12:59

【问题描述】：

我试图让一个子菜单在滚动时停留在页面顶部，一旦它在滚动过程中到达顶部。这是我目前所拥有的：

$(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');
 );

我遇到的问题是滚动不平滑，一旦元素从位置更改：相对于位置：固定，内容似乎向上跳跃/跳过约 415 像素，与子菜单的高度相同。

这是css：

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

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

我已经为.first 添加了行，当页面滚动并到达页面顶部的 175px 范围内时，.css('padding-top','415') 的填充顶部为 415px .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');
  
);

【参考方案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 之间的加法