我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题,所以当你链接到页面其他地方的锚时,页面跳转,锚位于页面顶部,留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS,但Javascript也可以接受。
当前回答
你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接,例如<a name="anc1"></a>
一个示例规则可能是:
a[name]:not([href]){
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
其他回答
我找到了这个解决方案:
<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>
这不会在内容和锚链接中产生任何差距,效果非常好。
我也在寻找这个问题的解决方案。对我来说,这很简单。
我有一个列表菜单与所有的链接:
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>
下面是标题。
<h3>one</h3>
<p>text here</p>
<h3>two</h3>
<p>text here</p>
<h3>three</h3>
<p>text here</p>
<h3>four</h3>
<p>text here</p>
现在,因为我在页面顶部有一个固定的菜单,我不能让它去我的标签,因为它会在菜单后面。
相反,我在标签中放入了一个span标签,并带有正确的id。
<h3><span id="one"></span>one</h3>
现在使用2行CSS来正确定位它们。
h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}
更改顶部值以匹配固定标题的高度(或更多)。 现在我认为这也适用于其他元素。
正如@moeffju所建议的,这可以通过CSS实现。我遇到的问题(我很惊讶我没有看到讨论)是用填充或透明边框重叠之前的元素的技巧,可以防止在这些部分的底部进行悬停和单击操作,因为下面的部分在z轴次序中更高。
我发现的最好的解决办法是把部分内容放在一个div,是在z-index: 1:
// Apply to elements that serve as anchors
.offset-anchor {
border-top: 75px solid transparent;
margin: -75px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {
position: relative;
z-index: 1;
}
用可链接id来提供导航栏高度的隐藏span标签怎么样?
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴:http://jsfiddle.net/N6f2f/7
你可以不用js也不用修改html。它´s css-only。
a[id]::before {
content: '';
display: block;
height: 50px;
margin: -30px 0 0;
}
这将在每个带id的a-tag之前附加一个伪元素。调整值以匹配头部的高度。
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- React不会加载本地图像
- 我如何在HTML中创建一个泪滴?
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 元素在“for(…in…)”循环中排序