使用导航栏滚动时,在部分顶部获取空间

时间:2016-01-29 17:08:45

标签: html css twitter-bootstrap navigation navigationbar

我认为这是一个非常简单的问题,但我自己无法得到解决方案。

我在Bootstrap 3中有一个固定的导航栏,当我点击其中一个导航项时,它会向下滚动到具有正确ID的部分。然而,它一直持续到文本的开头。我想在文本的顶部给它一点空间(填充),所以我更容易阅读。

这是我所说的一个例子。

enter image description here

但是,我希望它向下滚动直到该部分的开头,包括我的填充空间。像这样:

enter image description here

所以基本上如果我可以将菜单设置为在完美的部分之上导航到大约20或30px,因为我不想添加更多的填充或边距,因为这会在手动滚动时的网站。

2 个答案:

答案 0 :(得分:0)

我使用jQuery插件来处理这种位置偏移。在github上查看Animated Scroll

我没有掌握所有代码,但是我用这个代码来启动它:

    $('.btn--scroll-down').click(function () { 
      $(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
    });

如果您阅读文档,您会注意到填充选项 - 这是您的偏移量。

答案 1 :(得分:0)

我认为具有正确ID的部分为margin-top: x,请在padding-top: x上进行更改。它应该工作。