使用.affix和固定导航栏的侧边栏偏移
使用.affix和固定导航栏的侧边栏偏移
提问于 2016-01-21 04:43:11
所以我正在开发一个网站，它有一个固定的导航栏：
http://abnetworksa.rewind9.com/servicios/infraestructura/
除了固定的导航栏，还有一个“粘性”侧边栏。侧边栏链接是将用户重定向到同一页面中的特定内容的锚点。
一切似乎都很正常。但是，当单击其中一个侧边栏链接时，目标内容标题会隐藏在固定导航栏下。有没有办法可以设置和偏移这个侧边栏的链接？
我试过了
var offset = 380;
$('.sidebar-nav li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, +offset);
});但它似乎不起作用，似乎开始从下到上进行一些奇怪的计算。
有什么帮助吗？
非常感谢!
回答 1
Stack Overflow用户
发布于 2016-01-21 16:31:01
标头不是固定的。我看到你在使用bootstrap，所以你可以使用navbar-fixed-top类来使它变得粘性。您需要将header标记上的类从navbar-static-top更改为navbar-fixed-top。
要回答问题的第二部分，由于您在项目中使用bootstrap，因此此答案https://stackoverflow.com/a/14805098/3070770将帮助您。
$(".sidebar-nav li a").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
var heightOfNavigationMenu = $('.navbar').height
// animate
$('html, body').animate({
scrollTop: $(hash).offset().top - heightOfNavigationMenu
}, 300, function(){
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});请注意变量heightOfNavigationMenu。此外，在某些浏览器中不支持ScrollIntoView。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34910114
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号