更改scrollTop偏移

Change scrollTop offset

本文关键字：偏移 scrollTop 更改      更新时间：2023-09-26

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

问题是，在你滚动经过全屏英雄之前和之后，偏移量是不同的。但是，当你经过jumbotron时，它会很好地工作。我尝试了很多不同的东西，但我似乎能让它发挥作用。

在这里看看小提琴

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

你对angular.js开放吗？我有一个指令可以用来做这件事。如图所示。

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

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

编辑：这是

我不建议仅仅为了这个就抓住棱角。但您可以使用事件和逻辑的基础来构建自己的解决方案。

这是在创建一个元素并放置

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

则当菜单返回到其静态位置时，该元素被移除。

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

编辑2解决方案：

以下是应用于您的JSFiddle 的概念

这不是最好的解决方案，但通过将margin: 0 0 -100px 0;添加到.navbar中，您就可以解决间距问题。

此外，由于缺少图像，您会收到22个控制台错误。我并不是说这会造成任何重大问题，但你最好还是失去它们。

问题是，当你没有滚动过英雄时，导航仍然是布局的一部分，并将其下方的内容推低一点。当你滚动经过英雄（手动或通过脚本）时，导航会被删除并定位。使得所有被吼到"向上跳"的东西都与导航高度完全一样。

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

当你滚动经过英雄时，它的位置不会改变。

相关文章：