javascript - 更改滚动顶部偏移量

Question

我正在使用 bootstrap 3，并且在页面顶部有一个全屏英雄单元，下面是我的导航。我有一些js，可以让我的导航栏在滚动经过全屏英雄后固定在顶部。还有一些用于平滑滚动链接的 js。

问题是滚动经过全屏英雄之前和之后的偏移量是不同的。但当你经过大屏幕时，它就可以正常工作了。我尝试了很多不同的方法，但我似乎可以让它准确地工作。

Check out the fiddle here.

这是我的平滑滚动链接的js:

$(document).ready(function() {
    // navigation click actions 
    $('.scroll-link').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
    // scroll to top action
    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 1200);       
    });
    // mobile nav toggle
    $('#nav-toggle').on('click', function (event) {
        event.preventDefault();
        $('#main-nav').toggleClass("open");
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 95;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}

通过更改 var offSet = 95; 我可以调整偏移量，但是在导航栏粘到顶部之前使用 180 而在粘到顶部时使用 95 的最佳方法是什么？

这也是我用于导航栏的 js:

$(function () {
/*    $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});

    $(window).resize(function (e) {
        $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
    });*/
    $(document).on( 'scroll', function(){
        console.log('scroll top : ' + $(window).scrollTop());
        if($(window).scrollTop()>=$(".jumbotron").height())
        {
             $(".navbar").addClass("navbar-fixed-top");
        }

        if($(window).scrollTop()<$(".jumbotron").height())
        {
             $(".navbar").removeClass("navbar-fixed-top");
        }
    });
});

Answer 1

你对 angular.js 持开放态度吗？我有一个用于此目的的指令。如图所示here 。

我会为您获取 plunker 链接。您可能会发现该代码很有帮助。

本质上，当您将菜单拉到新的布局位置时，您需要创建一个 Ghost dom 元素来代替菜单。

编辑:Here it is

我不会建议仅仅为了这个而使用 Angular。但是您可以使用事件和逻辑的基础来构建您自己的解决方案。

这里创建一个元素并放置在其位置

$scope.spacer = $element.after(
    '<div class="spacer" style="height:' + $element[0].clientHeight + 'px">&nbsp;</div>').next();

然后，当菜单返回到其静态位置时，该元素将被删除。

检查 dom 并观察它如何变化，这可能会帮助您查看需要发生的事件和变化。

编辑 2 解决方案:

HERE is the concepts applied to your JSFiddle