[英]How do I link to top of a section on the page minus the height of a fixed nav-bar?
当我单击固定导航栏上的链接时,它会跳转到页面上的特定部分,但固定导航栏的高度会溢出。 我怎样才能减去那个高度? 这需要 javascript/jquery 吗?
<div id="fixedNavWrapper">
<div id="navLinks">
<ul>
<li><a href="#about">ABOUT ME</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
</ul>
</div>
</div>
<section id="about" class="section">
<h2>ABOUT ME</h2>
</section>
.CSS:
#fixedNavWrapper {
position: fixed;
z-index: 1;
width: 100%;
top: 0;
left: 0;
}
#navLinks {
text-align: center;
width: 100%;
height: 57px;
background: #000000;
}
#navLinks ul {
list-style: none;
margin: 0;
padding: 5px;
display: inline-block;
}
#navLinks ul li {
margin: 0;
padding: 0;
display: inline;
}
#navLinks ul li a {
text-decoration: none;
display: block;
float: left;
padding: 0 65px;
height: 45px;
line-height: 45px;
}
我认为你不能用css做到这一点。 但是,您可以使用 jQuery 来执行此操作。 很容易:
HTML(向 li 元素添加类以在 jQuery 代码中识别它们):
<div id="fixedNavWrapper">
<div id="navLinks">
<ul>
<li class="about"><a href="#about">ABOUT ME</a></li>
<li class="portfolio"><a href="#portfolio">PORTFOLIO</a></li>
</ul>
</div>
</div>
<section id="about" class="section">
<h2>ABOUT ME</h2>
</section>
JS(使用事件 .click 将您的“身体”移动到正确的位置)
$('li.about').click(function(){
positionabout = $('#about').offset().top - $('#fixedNavWrapper').height(); // Position of #about - nav height = correct position
$("html, body").animate({scrollTop:positionabout}, '500', 'swing');
})
$('li.portfolio').click(function(){
positionport = $('#portfolio').offset().top - $('#fixedNavWrapper').height();
$("html, body").animate({scrollTop:positionport}, '500', 'swing');
})
更笼统一点:
$('.navbar li a').click(function () {
var speed = 500;
var easing = 'swing';
var topMargin = 10;
var href = $(this).attr("href");
var name = href.substr(href.indexOf("#") + 1);
var $link = $("a[name='" + name + "']");
positionabout = $link.offset().top - $('.navbar').height() - topMargin;
$("html, body").animate({scrollTop: positionabout}, speed, easing);
return false;
});
我的问题:链接重定向到其他页面锚点 - 当我单击它时,我使用 10 rem 的导航栏重定向到其他页面。所以问题是我看不到完整的文章,因为导航栏在文章上方。
scroll-padding-top: 10rem;
对我来说是最好的答案。 感谢@Becki6799
只需将其添加到您的 .css 文件中:
html {滚动填充顶部:5rem;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.