Question

我的网站上有一个固定的导航栏，使用了几乎所有的Bootstrap默认值。我有一些jQuery用于一些页面导航滚动：

$(function() {
    $("a.page-scroll").bind("click", function(e) {
        var t = $(this);
        $("html, body").stop().animate({
            scrollTop: (parseInt($(t.attr("href")).offset().top)-40)
        }, 1500, "easeInOutExpo");
        e.preventDefault()
    })
});

这没关系。我将-40添加到偏移顶部以确保每个部分的标题和固定的导航栏之间有足够的空间。

我的HTML看起来有点像这样：

<section id="pricing" class="pricing-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

因此导航会根据#pricing部分偏移顶部添加活动类。如果我只是滚动，这很好。但是当我点击导航链接并使用jQuery滚动到那一点时，我添加的-40表示它在偏移触发要添加的活动类之前停止。

这就是我的意思：

那么如何在添加引导活动类以匹配-40px偏移量时进行调整？

SOLUTION：

这么简单。在这里找到答案：How do I set the offset for ScrollSpy in Bootstrap?。我只需要调整我的body标签中的滚动间谍数据，如下所示：

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="40">

请注意，data-offset="40"会立即解决问题。

Bootstrap 3导航 - 在滚动

0 个答案: