請選擇 進入手機版 | 繼續訪問電腦版

東里論壇

 找回密碼
 立即註冊

QQ登录

只需一步,快速开始

搜索
查看: 4904|回復: 2

[使用心得] 纯CSS解决HTML上的锚点偏移问题

[複製鏈接]

312

主題

459

帖子

2910

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
2910
發表於 2015-4-23 13:14:01 | 顯示全部樓層 |閱讀模式
最近发现手机站中,锚点会被固定的页面顶部栏遮挡,找了好几天,终于找到采用纯CSS的解决办法。并根据东里书斋手机站的具体情况,做了点修订,下面是代码模板。


HTML部分:

  1. <div id="box1"></div>

  2. <div id="box2"></div>

  3. <a href="#hehe">点这里</a>

  4. <div id="box3"></div>

  5. <a id="hehe" class="target">
  6.    <span class="zhanwei"></span>
  7.    锚点在这里。
  8. </a>

  9. <div id="box4"></div>

  10. <div id="box5"></div>
複製代碼


CSS部分:

  1. *{
  2.   margin:0;
  3.   padding:0;
  4. }
  5. #box1{
  6.     height: 50px;
  7.     background:grey;
  8.     position:fixed;
  9.     top:0;
  10.     left:0;
  11.     right:0;
  12.     z-index:100;
  13. }
  14. #box2{
  15.     height:200px;
  16.     background:green;
  17. }
  18. #box3{
  19.     height:600px;
  20.     background:pink;
  21. }
  22. #box4{
  23.     height:600px;
  24.     background:purple;
  25. }
  26. #box5{
  27.     height:600px;
  28.     background:yellow;
  29. }
  30. .target {
  31.   position: relative;
  32. }
  33. .zhanwei {
  34.   position: absolute;
  35.   display:block;
  36.   width:100px;   //小于父级宽度的值
  37.   height:50px;   //高度值为顶部固定块的高度
  38.   top: -50px;    //值为顶部固定块的高度
  39.   z-index:-100;
  40. }
複製代碼


上面代码中,box1及其样式可以不要,不影响锚点的偏移效果。在实际使用中,//及后面的注释可以不要。

这个办法,其实就是在锚点之前,建立一个暗锚,并设置他的高度,用以占位。

在我的网站中,因为href和id是互相指向的,所以.zhanwei必须有 z-index,并且要采用负数值,否则zhanwei框会影响处于此框范围内的其他有href的元素。

如果不考虑多锚点的遮挡问题,也可以不要zhanwei所在的span,直接在target的样式代码中增加:{padding-top: 50px;margin-top: -50px;}。
回復

使用道具 舉報

29

主題

148

帖子

3809

積分

嘉賓

Rank: 5Rank: 5

積分
3809
發表於 2015-4-24 09:10:10 | 顯示全部樓層
很艱深啊!
回復

使用道具 舉報

312

主題

459

帖子

2910

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
2910
 樓主| 發表於 2015-5-1 12:47:09 | 顯示全部樓層

还好,只是HTML和CSS,我还能折腾,要是JS就只能折瞎了。
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

QQ|小黑屋|手機版|Archiver|東里論壇 ( 粤ICP备14015598号 ) 公安备案图标粤公网安备 44512202000019号

GMT+8, 2020-8-13 02:37 , Processed in 0.078125 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回復 返回頂部 返回列表