javascript - 在 2 个不同的 div id 上固定位置

Question

一旦发生某些滚动，我有一个页面需要 2 个 div 才能获得固定位置。问题是我需要为每个代码使用 2 个不同的代码，因为我不能将它们放在同一个 div 上。

这是我使用的 jquery 代码。

<script>
$(document).ready(function() {
    if (window.XMLHttpRequest) {
    window.onscroll = function() {
        if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
            if ($(window).height() > 20) {
                $('#wrappernav').addClass('wrappernavstatic');
            }
        }
        else {
            $('#wrappernav').removeClass('wrappernavstatic');
        }
    };
    }
});

我需要为另一个 div 添加另一个，但为 250px。但是当我将两者放在同一页面上时，它会发生冲突，并且只有第二个正在处理第一个的详细信息。

<script>
$(document).ready(function() {
    if (window.XMLHttpRequest) {
    window.onscroll = function() {
        if ($('body').scrollTop() > 300 || $('html').scrollTop() > 300) {
            if ($(window).height() > 20) {
                $('#wrappernavfilter').addClass('wrappernavfilterstatic');
            }
        }
        else {
            $('#wrappernavfilter').removeClass('wrappernavfilterstatic');
        }
    };
    }
});

我怎样才能将它们混合起来以保持活跃？

Answer 1

您可以使用.scroll()绑定两个处理程序：

$(window).scroll(function () {
    // ...
});

而不是仅限于 1 window.onscroll：

window.onscroll = function () {
    // ...
};

因此，对于您问题中的第一个片段：

<script>
$(document).ready(function() {
    if (window.XMLHttpRequest) {
        $(window).scroll(function() {
            if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
                if ($(window).height() > 20) {
                    $('#wrappernav').addClass('wrappernavstatic');
                }
            }
            else {
                $('#wrappernav').removeClass('wrappernavstatic');
            }
        });
    }
});