使用jQuery固定侧边banner时出现左偏移、被导航栏遮挡问题求助

异常根因说明 #

• 区块左偏移：position: fixed 是相对于浏览器视口定位，元素脱离原有flex布局流后没有指定水平位置，默认会对齐视口左侧；且原代码使用window.screen.width判断响应式断点是错误的，该值是设备物理屏幕宽度，响应式判断需要使用浏览器视口宽度。
• 被导航栏遮挡：.nav设置了z-index:99，而.banner未指定z-index，层级低于导航栏导致被覆盖。
  另外原代码中.main设置了position:sticky，不符合「左侧内容随滚动上移」的需求，需要同步修改。

具体修改代码 #

CSS修改 #

.nav{
    position: sticky;
    top:0px;
    width: 100%;
    height: 60px;
    background-color: #f55c47;
    z-index:99;
  }
.container{
    display: flex;
    justify-content:space-between;
}
/* 去掉sticky定位，实现随滚动上移 */
.main{
      flex:2;
      background-color: #9fe6a0;
      padding:10px;
}
/* 新增z-index保证层级高于内容、低于导航 */
.banner{
      flex:1;
      width: 200px;
      height: 100px;
      background-color: #564a4a;
      z-index: 98;
}
/* 修正图片样式选择器，匹配html中的class属性 */
.photo{
        width: 100%;
      }

JS修改 #

$(function(){   
    // 提前缓存banner初始水平偏移、header偏移值，避免滚动时重复计算
    var bannerLeft = $(".banner").offset().left;
    var adscrtop =$(".header").offset().top
    $(window).scroll(function () {
        var scrollVal = $(this).scrollTop();
        // 用视口宽度判断响应式断点
        if($(window).width()>767){
            if(scrollVal> adscrtop){
                // 固定时指定left值，和原有布局位置对齐
                $(".banner").css({"position":"fixed","top":"60px", "left": bannerLeft + "px"});
            }else{
                // 恢复默认布局时清空left属性
                $(".banner").css({"position": "static", "left": "auto"});
            }
        }
    });
    // 窗口大小变化时重新计算banner偏移，避免resize后位置错乱
    $(window).resize(function(){
        if($(window).width()>767 && $(".banner").css("position") === "static"){
            bannerLeft = $(".banner").offset().left;
        }
    })
});

HTML小修正 #

原代码中img标签属性书写错误，修正为：

<img class="photo" src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">

内容的提问来源于stack exchange，提问作者WEI A