Javascript 更改滚动顶部偏移量

我使用的是Bootstrap3，在我的页面顶部有一个全屏英雄单元，下面是我的导航。我有一些js，它允许我的导航栏在你滚动过全屏英雄后固定在顶部。还有一些js用于平滑滚动链接

问题在于，滚动经过全屏英雄之前和之后的偏移量不同。但当你越过巨龙时，它会很好地工作。我已经尝试了很多不同的方法，但我似乎可以完全做到这一点

以下是我的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");
        }
    });
});

$（函数（）{
/*$（.navbar fixed top”）.css（{“top”：$（.jumbotron”）.height（）}）；
$（窗口）。调整大小（函数（e）{
$（.navbar fixed top”）.css（{“top”：$（.jumbotron”）.height（）}）；
});*/
$（文档）.on（'scroll'，function（）{
log（'scroll-top:'+$（window.scroll-top（））；
如果（$（窗口）.scrollTop（）>=$（“.jumbotron”）.height（））
{
$（“.navbar”）.addClass（“navbar固定顶部”）；
}
如果（$（window）.scrollTop（）这不是最好的解决方案，但是通过在
导航栏中添加
边距：0 0-100px 0；
，您就失去了间距问题

另外，由于缺少图像，您会收到22个控制台错误。我并不是说这会导致任何重大问题，但您最好还是将其丢失。
问题是，当您没有滚动过英雄时，导航仍然是布局的一部分，并将其下方的内容推低一点。当您滚动过英雄时（手动或通过脚本）英雄，导航被移除并定位。这使得所有被吼叫的东西都“跳起来”精确到导航高度

这意味着，如果投资组合是从顶部开始的
1000px
，点击你说：从顶部开始；但随后porfolio向上移动
100px
（如上所述），这意味着它现在是从顶部开始的
900px
，而窗口按你的要求滚动
1000px

当你滚动过英雄时，没有任何东西会改变它的位置。
你是否打开angular.js？我有一个用于此的指令。如图所示

我将为您获取plunker链接。您可能会发现代码很有用

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

编辑：

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

这里是创建一个元素并放置在它的位置

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

$scope.spacer=$element.after(
''）下一个（）；

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

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

编辑2解决方案：

好的，这确实有效，但我觉得它会破坏其他东西。lol，如果成功，我会回来的！控制台错误是因为错误的图像路径，我一直在移动网站，我使用的插件需要完整的URL。谢谢Martin。好的，所以我遇到了一个问题，这导致导航栏下第一部分的间距为1如果您查看“我们创建可用的ui”上方的间距，将减少0个填充有什么解决办法吗？仍在查看代码，但我可能会添加一个滚动指示器。因为您更改了导航栏的样式，并将墙纸填充到视口中，我不知道页面顶部以外有内容。Lol源代码显示了我，然后我被插入并向下滚动。这不明显。可能是little
向下滚动
当用户滚动时，在左下角或右下角消失的白色文本。@WASasquatch自从我开始制作英雄lol以来，我的列表中就有了这些内容，希望我今天就完成了！太棒了。我只是觉得我上错了页哈哈。而且，我没有看到这个填充减少100。我看到了nav向右移动大约10px，内容开始滚动。我没有发布代码，因为我不知道什么代码与问题相关，因为我不知道是什么原因造成的！如果我知道问题的来源，我会很乐意提供代码。我能得到关于代码修复的提示吗？我现在理解问题，我相信，但我没有卢布对此进行了相应的调整。是的，当然，如果你能给我一个教程或任何有帮助的东西！我是javascript新手，但有一些例子等，我应该可以！我已经编辑了我的答案，包括plunker链接和添加ghost元素的简短代码剪贴。我相信这比我的水平略高，我正在考虑在这一点上更改布局，我甚至无法从plnkr中找到它！@ve1jdramas我已经叉好并修复了你的JSFIDDLE该死的废话我不敢相信你得到了它！！！！！好的，给我15分钟让我检查一下，赏金是你的！