码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-03-16 16:13:37      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:

1. 问题描述

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

 

2. 解决办法

a. 设定占位锚点,并给占位锚点设置样式,比如

    <a href="#test">hehehe</a>
    <div style="height:400px;width:100%;background:red;"></div>
    <div id="test">
        <span class="anchor"></span>
        <div id="main" style="height:400px"></div>
    </div>
    <div style="height:800px;width:100%;background:green;"></div>
    .anchor {
        display: block;
        height: 115px; 
        margin-top: -115px;
        visibility: hidden;        
    }

 

b. 使用:target  伪类

 

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

标签:

原文地址:http://www.cnblogs.com/huxiaoyun90/p/4341956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!