jQuery实现固定导航菜单滚动未动态跟随下移问题解决方案问询

API 探路者

2026-9-26

问题解决方法

问题根因

给.header设置position: fixed时，元素会脱离文档流，原本它在页面中占据的高度会消失，下方内容会自动上移，看起来就像导航没有跟随滚动、甚至盖住了下面的内容
你把.s-icon的点击事件绑定在了scroll事件的回调内，每滚动一次页面就会重复绑定一次点击事件，会导致后续点击操作触发多次逻辑，出现异常
浏览器默认给body设置了外边距，会导致宽度100%的固定定位导航出现横向溢出的问题

修复代码

修改后的jQuery代码

// 提前绑定点击事件，不要放在scroll回调内
jQuery('.s-icon').click(function(){
    if(jQuery(window).scrollTop() > 100){
        jQuery('.sInput').css({position: 'fixed', top:'50px',display:'block'});
    }
});
// 提前获取header高度，用来预留占位高度
const headerHeight = jQuery('.header').outerHeight();

jQuery(window).scroll(function () {
  var currentScroll = $(window).scrollTop();
  if (currentScroll > 100) {
    jQuery('.header').css({position: 'fixed', top: '0'});
    // 给body加padding-top，抵消header脱离文档流的高度损失
    jQuery('body').css('padding-top', headerHeight + 'px');
    jQuery('.s-icon').css('display','block');
    jQuery('.sInput').css({display: 'none'});
  } else {
    jQuery('.header').css({position: 'relative'});
    // 滚动回顶部后清除占位padding
    jQuery('body').css('padding-top', 0);
    jQuery('.s-icon').css('display','none');
    jQuery('.sInput').css({position: 'relative',display:'block',top:'0px'});
  }
});

修改后的CSS代码

在原有CSS基础上调整body样式，清除默认边距：

body{
  height:1500px;
  margin: 0; /* 清除默认边距，避免导航横向溢出 */
}
ul{
  display:flex;
  
}
li{
    margin-right:2%;
    list-style:none;
}
.header{
  background:#CCC;
  width:100% !important;
}
.s-icon{
  display:none;
  cursor:pointer;
}
.lorem{
  width:30%;
}