html自适应固定头部后锚点定位偏移调整

  有时候我们会使用锚点定位,如果此时头部菜单我们设置成固定到头部,那么我们在使用锚点定位的时候,定位到的页面位置就会向上偏移了。为此我们给出了以下自适应解决方案:


假设桌面端固定头部的高度为130px,手机端无固定头部。


链接为:


<a href="https://yyyc.com/portfolio#GRAPHICDESIGN" target="_blank" rel="noopener noreferrer">定位锚点</a>


锚点为:


<a class="target-fix" id="GRAPHICDESIGN"></a>


我们给锚点添加一个class


target-fix 样式为:


/*暗锚,让它滚动上来的时候在实际位置的基础上向下偏移130px*/

@media (min-width: 992px){ /*桌面适应*/
.target-fix {
    position: relative;
    top: -130px; /*偏移值*/
    display: block;
    visibility: hidden; /*不让它展示*/
    }
}

@media (max-width: 992px){ /*手机适应*/
.target-fix {
    position: relative;
    top: -0px; /*偏移值*/
    display: block;
    visibility: hidden; /*不让它展示*/
    }
}


  这样就可以解决偏移问题了,学名叫 暗锚 ,涨知识了吧!

发表评论

邮箱地址不会被公开。 必填项已用*标注