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 () {
    // ...
});

而不是仅限于window.onscroll只有1：

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');
            }
        });
    }
});

固定2个不同div id的位置

1 个答案: