在 window 调整大小时更新我的 offset().top 值

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) 但不知道如何正确使用它们。在过去的三个晚上里，我一直在搜索 google 和玩弄（破解）我的代码。也许我只需要在调整大小时重置我的变量值，或者我必须重置整个页面。我不确定处理这个问题的最佳方法。

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

Answer 1

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

  $(window).resize(function () {
            top1 = $('#home').offset().top;
            top2 = $('#profile').offset().top;
            top3 = $('#portfolio').offset().top;
            top4 = $('#contact').offset().top;
        });

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

在 window 调整大小时更新我的 offset().top 值

update my offset().top value on window resize

javascript

jquery

resize

offset

在 window 调整大小时更新我的​​ offset().top 值

update my offset().top value on window resize

javascript

jquery

resize

offset

在 window 调整大小时更新我的 offset().top 值