javascript - 单击 anchor 链接后导航栏隐藏文本

Question

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

我创建了一个固定在顶部的导航栏，里面有我的 Logo 、一个标题、一些链接和一个显示“跳转到:”的下拉菜单。单击下拉菜单后，会出现一个菜单，其中包含指向页面内某个部分的四个链接。所有链接都有效。

我的问题是，因为每个部分的标题现在都放在我页面的顶部，所以我的固定导航栏阻止了它。无论如何我可以阻止这种情况发生吗？一点 jQuery 之类的？

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

Answer 1

我想你问的是 anchor 跳转，它将匹配的 anchor 放置在视口(viewport)的顶部和固定导航的“下方”。我遇到了类似的问题并使用了这段代码:

/* 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 类添加到您希望能够跳转到的任何元素。