我在我的网站顶部使用静态条,大约20px高.当我点击一个锚点链接时(对于那些不知道的人来说,维基百科上的导航就是这样的.点击一个标题,然后浏览器就会显示它).文本的一部分消失在顶部栏后面.
有没有办法阻止这种情况发生？我不能使用iFrame.我能想到的只是让它每次都回滚一下,但还有另外一种方法吗？一些CSS设置来操纵身体或什么？
Fre*_*ver 31
您可以在没有任何JavaScript的情况下使用CSS.
给你的锚一个班:
<a class="anchor"></a>
然后,您可以将锚点设置为高于或低于页面实际显示位置的偏移量,方法是将其设置为块元素并相对定位.-250px将锚定位置为250px
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
到1月看到偏移html锚点以调整固定标题
Ske*_*ets 11
scroll-margin-top: 20px;
它就像听起来一样：就像有边距一样，但仅在滚动上下文中。因此scroll-margin-top: 20px;，在元素上意味着单击该元素的锚标记会将页面滚动到元素上方20 像素处。
完整示例：
scroll-margin-top: 20px;
nav{
position: fixed;
top:0;
left:0;
background: black;
color: white;
width: 100%;
}
#after-nav{
margin-top: 25px;
}
#section-1{
width: 100%;
background: green;
height: 500px;
scroll-margin-top: 20px;
}
#section-2{
width: 100%;
background: blue;
height: 500px;
scroll-margin-top: 20px;
}
ul{
margin-top: 0;
}要使用CSS修复此问题,您可以向要跳转到的元素添加填充:
或者,您可以添加边框:
div{
height: 650px;
background:#ccc;
/*the magic happens here*/
border-top:42px solid #fff;
}
ul{
top: 0;
width: 100%;
height:20px;
position: fixed;
background: deeppink;
margin:0;
padding:10px;
}
li{
float:left;
list-style:none;
padding-left:10px;
}
div:first-of-type{
margin-top:0;
}<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#s1">link 1</a>
<li><a href="#s2">link 2</a>
<li><a href="#s3">link 3</a>
<li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>但是,这并不总是适用.
对于javascript解决方案,您可以使用附加到锚元素的单击事件来滚动调整后的像素数量,如下所示:
document.querySelector("a").addEventListener("click",function(e){
// dynamically determining the height of your navbar
let navbar = document.querySelector("nav");
let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
// show 5 pixels of previous section just for illustration purposes
let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
/* scrolling to the element taking the height of the static bar into account*/
window.scroll(0,scrollHeight);
/*properly updating the window location*/
window.location.hash = e.target.hash;
/* do not execute default action*/
e.preventDefault();
});nav{
position:fixed;
top:0;
left:0;
right:0;
height:40px;
text-align:center;
background:#bada55;
margin:0;
}
a{
display:block;
padding-top:40px;
}
#section1{
height:800px;
background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
height:800px;
background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}<nav>static header</nav>
<a href="#section2">jump to section 2</a>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>CSS-only:它有点脏,但是如果你链接到一个块元素:target {padding-top: 20px;}会起作用(我假设你这样做,因为你的问题是div).但是,之后手动滚动可能看起来不太好.示例http://dabblet.com/gist/3121729
不过,我认为使用一些JavaScript来解决这个问题会更好.
我有同样的问题。这是一个 jQuery 解决方案
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $trget = $(target);
// Example: your header is 70px tall.
var newTop = $trget.offset().top - 70;
$('html, body').animate ({
scrollTop: newTop
}, 500, 'swing', function () {
window.location.hash = target;
});
});
| 归档时间： |
|
| 查看次数： |
42512 次 |
| 最近记录： |