温馨提示:网站使用自适应技术,手机与电脑显示界面不同,电脑界面显示效果更佳。

做了个小站,积累一些技术,分享一些原创
    体会生活,记录一些小随笔,闲说心得

锚点跳转后被固定顶部栏遮挡去除方法

我们做网页时,有时会用到锚点在本页面跳到指定位置。这是很方便的方法。

但随着新技术的发展,固定顶部栏成为一些网站的必备(比如我这站)。那么就会出现一个问题,当你在页面设置锚点后跳转到指定位置时,随着划动到位,却发现那个固定顶部栏会遮挡到,刚好是顶部栏的高度(因为固定顶部栏一般是上面一层)

所以,要怎样在跳到锚点时,锚点能减去固定顶部栏的高度,刚好跳到这个高度下显示呢。

网络上有些人,提到用 js 来实现。 js 又要多一大段代码或个文件,而且写不好不一定有效

其实,我们根本不需要那么麻烦,只需在css里设置一下类,就行了。

我们来举例吧。比如现在写了以下锚点:

<a href="#zrg">这是锚点链接文字</a>
<div id="zrg">
这是锚点到达的位置</div>

以上锚点到达位置,可用在 div 或 span 上

那么就在css里写上:

隐藏内容,回复可见(无需登录注册)    “回复本文”后“刷新页面”查看隐藏内容!

怎么样,只要两个代码,是不是很简单,快试试去吧

点击数:756

你可能也喜欢下面相关文章:

1 讨论

发表回复

必填项已用*标注