【TRICK】解决锚点定位向下浮动Xpx问题

1. 问题描述

页面滚动后，菜单栏会固定在页头，当锚点定位时，菜单会遮盖部分定位后的内容，所以需要在锚点定位后自动向下漂移Xpx。

 

2. 解决办法

a. 利用空div 占位，如下：

    <a href="#test">hehehe</a>
    <div style="height:400px;width:100%;background:red;"></div>
    <div id="test">
        <div class="anchor"></div>
        <div id="main" style="height:400px"></div>
    </div>
    <div style="height:800px;width:100%;background:green;"></div>

    .anchor {
        height: 115px; 
        margin-top: -115px;  
    }

 

b. 使用div 的overflow 属性

    <a href="#test">hehehe</a>
    <div style="height:400px;width:100%;background:red;"></div>
    <div id="container">
        <div class="anchor" id="test"></div>
        <div id="main" style="height:400px"></div>
    </div>
    <div style="height:800px;width:100%;background:green;"></div>

 

    #container {
        overflow: hidden;
    }
    .anchor {
        height: 115px;
        margin-top: -115px;
    }

 

c. 使用:target  伪类