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

时间:2014-02-04 13:04:08

标签: javascript html css navbar

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

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

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

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

4 个答案:

答案 0 :(得分:2)

您需要设置:

body { padding-top: 70px; }

这来自Bootstrap文档本身

  

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

您可以查看here

答案 1 :(得分: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类添加到任何元素,您希望能够跳转到。

答案 2 :(得分:0)

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

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

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

  3. 希望它有所帮助。

答案 3 :(得分:0)

以下没有任何JS的作品:

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

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