我正在努力清理锚点的工作方式.我有一个固定在页面的顶部的头,所以当你在页面的其他地方链接到一个锚,页面跳转所以其锚固在页面的顶部,留下固定头后面的内容(我希望那讲得通).我需要一种方法来将锚点从头部的高度偏移25px.我更喜欢HTML或CSS,但Javascript也可以接受.
我不确定询问/搜索此问题的最佳方式:
当您单击锚链接时,它会将您带到页面的该部分,其中链接区域现在位于页面的顶部.我想锚链接把我发送到页面的那一部分,但我想在顶部有一些空间.就像在,我不希望它发送给我在非常顶部的链接部分,我想在那里有100个左右像素的空间.
这有意义吗？这可能吗？
编辑显示代码 - 它只是一个锚标记:
<a href="#anchor">Click me!</a>
<p id="anchor">I should be 100px below where I currently am!</p>
在我构建的网站上滚动时,使用CSS属性position: fixed按预期工作,以在页面顶部保留导航栏.
但是,在Chrome中,如果您使用导航栏中的链接,它有时会消失.通常,您点击的项目仍然可见,但并非总是如此.有时候整个事情都会消失.移动鼠标会带回元素的一部分,只需单击一下滚动滚轮或箭头键即可返回元素.您可以在http://nikeplusphp.org上看到它(间接地)发生- 您可能需要点击一些导航链接几次才能看到它发生.
我也尝试过使用z-index和可见性/显示类型,但没有运气.
我遇到了这个问题,但修复对我来说根本不起作用.似乎是一个webkit问题,因为IE和Firefox工作得很好.
这是一个已知问题还是有修复可以保持固定元素可见？
更新:
只有效果元素top: 0;,我试过bottom: 0;,并按预期工作.
我目前正在构建一个网页,其中一些元素放置在靠近顶边的固定位置.所以每当我导航到锚点时,那些就会被放置在那些固定元素下面.我想知道是否有一些样式或其他方法,当导航到锚点时,会发生一些额外的偏移/边距？
示例源代码
<html>
<body>
<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>
<div style="position:absolute; top:0px;">
<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit …我在我的网站顶部使用静态条,大约20px高.当我点击一个锚点链接时(对于那些不知道的人来说,维基百科上的导航就是这样的.点击一个标题,然后浏览器就会显示它).文本的一部分消失在顶部栏后面.
有没有办法阻止这种情况发生？我不能使用iFrame.我能想到的只是让它每次都回滚一下,但还有另外一种方法吗？一些CSS设置来操纵身体或什么？
有什么想法吗？
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
}<a href="#" title="Edit" class="dashboard-edit">Edit</a>
<a href="#" title="Delete" class="dashboard-delete">Delete</a>所以,我有一个由几个部分组成的单页.用户可以通过滚动自己或单击导航栏(带锚点的href)来转到这些部分.由于Bootstrap 4导航栏固定在顶部,因此内容会被置于其下方.有没有办法我可以通过-54px来抵消锚点,这样每当我点击锚链接时,它会显示导航栏下方的内容(X:54px)而不是导航栏下面的内容(X:0px).
使这个codepen显示我面临的问题:
https://codepen.io/anon/pen/XEjaKv
每当你点击一个锚链接,它会带你到该部分,但是,导航栏覆盖文本..
所有部分都是100个视图高度.
SCSS使用:
.container{
section{
height: 100vh;
&#section1{
margin-top: 54px; // we need to offset the first section by 54px because of the navbar..
}
&#section1, &#section3{
background-color: #ddd;
}
&#section2, &#section4{
background-color:#ccc;
}
}
}
html{
scroll-behavior:smooth;
}
我正在使用smoothscroll.js来浏览我的网站.它停留在Firefox中的正确锚点上,但是在Chrome中它会在第一次点击链接时传递该点,并将内容推送到顶部,将内容隐藏在页面后面.然后,如果再次单击它,它会正确对齐.我也看到了其他网站上的问题.很想知道其他人是否有同样的问题.Chrome似乎忽略了任何顶部填充或边距或定位(例如:top:20%;).