Question

我最近一直在使用Twitter Bootstrap，我一直很喜欢它。

我创建了一个固定在顶部的导航栏，里面是我的徽标，标题，一些链接以及一个“跳转到：”的下拉列表。单击下拉列表后，会出现一个菜单，其中包含指向页面中某个部分的四个链接。所有链接都有效。

我的问题是，因为每个部分的标题现在位于我的页面顶部，我的固定导航栏会阻止它。无论如何我可以阻止这种情况发生吗？有点jQuery还是什么？

这是我的网站：fishyfishy2014.gweb.io。提前谢谢。

Answer 1

您需要设置：

body { padding-top: 70px; }

这来自Bootstrap文档本身

需要身体填充固定导航栏将覆盖您的另一个内容，除非你添加填充到顶部。试试你的自己的价值观或使用下面的代码段。提示：默认情况下，导航栏是 50px高。

您可以查看here

Answer 2

我认为你在询问一个锚点跳跃，它会将匹配的锚点放在视口的顶部并“固定”导航栏的“下面”。我遇到了类似的问题并使用了这段代码：

/* fixing anchor jumps */

var nav_height = 77; // pixels

$(window).bind('hashchange', function(e){
    if($(location.hash).hasClass('anchor')){
        scrollBy(0, nav_height);
    }
    return false;
});
$(document).ready(function(){
    if($(location.hash).hasClass('anchor')){
        $('html,body').animate({
            scrollTop: $(location.hash).offset().top - nav_height - 10
        }, 10 );
    }
});

您只需将anchor CSS类添加到任何元素，您希望能够跳转到。

Answer 3

实际上，2ndkauboy的解决方案确实有效。简而言之：

摆脱nav_height变量中的'px'（......如你所说）
使用anchor css类（......作为2ndkauboy说）但不要在<a>标签上使用它，而是在<div>上使用它，如下所示：

<a href="#jump_here">click here</a> ... other code here ... <div id="jump_here" class="anchor"> ... content ... </div>

希望它有所帮助。

Answer 4

以下没有任何JS的作品：

a:not([href]):before {
    display: block;
    content: "";
    height: 60px;
    margin: -60px 0 0;
}

a:not([href])假定您的锚点没有href属性。将两次出现的60px更改为您选择的值。

单击锚链接后，Navbar隐藏文本

4 个答案: