Question

I have a page that requires 2 divs to get fixed position once certain scrolling has occured. Issue is i need to use 2 different codes for each one, because I can’t place them on same div.

This is the jquery code I use.

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

and I need to add another one for another div but for 250px. But when i put both on same page, it gets conflicted and only the second one is working with the first’s details.

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

How can I both mix them to be active?

Answer 1

You can use .scroll() to bind both handlers:

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

Rather than being limited to just 1 with window.onscroll:

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

So, for the 1st snippet in your question:

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