Question

当我调整页面大小时，我想要更新4个offset().top值。我将每个值存储为变量，以便在向下滚动时使用滚动动画和css样式更改。这里有一些代码：

    var top1 = $('#home').offset().top;
    var top2 = $('#profile').offset().top;
    var top3 = $('#portfolio').offset().top;
    var top4 = $('#contact').offset().top;

    $(document).scroll(function () {
        var scrollPos = $(document).scrollTop();

        if (scrollPos >= top1 && scrollPos < top2) {
            $('.nav-bar').css({
                'background-color': 'rgba(255, 255, 255, 0.7)',
                'color': '#203B40'
            });


    $("#homeLink").click(function () {
        $("html, body").animate({
            scrollTop: top1
        }, 500);
    });
    $("#profileLink").click(function () {
        $("html, body").animate({
            scrollTop: top2 + 8
        }, 500);
    });

现在，如果我手动刷新页面后调整大小一切匹配正常，任何大小。但是，如果我更改页面大小而不刷新，则链接不再匹配。

我玩$(window).resize和window.addEventListener('resize', function)，但不知道如何正确使用它们。我花了最后三个晚上搜索谷歌和玩（打破）我的代码。也许我只需要在调整大小时重置我的变量值，或者我必须重置整个页面。我不确定解决这个问题的最佳方法。

这是我的codepen代码。我没有添加照片或bg imgs。但所有代码都在那里。感谢您的帮助。 https://codepen.io/efe-in-the-mountains/pen/dJLaqK?editors=0010

Answer 1

当触发$（window）.resize时，你需要更改top1，top2，top3，top4变量。添加下面的代码段，看看代码是否正在执行我认为您想要执行的操作。

$acl.SetAccessRuleProtection($true, $false)

在此处阅读更多https://developer.mozilla.org/en-US/docs/Web/Events/resize以了解何时触发调整大小事件。

更新我的偏移量（）。窗口调整大小的顶部值

1 个答案: