CODEWITHSUNDEEP
javascriptjquery
Luke
Luke

Reputation: 67

$(window).scroll being executed inside if-statement even when it doesn't meet the conditions

I'm using a debounce script as part of a conditional that will add some css to a side menu when a user scrolls a page beyond a certain amount of pixels and then hide the menu when they are a set amount of pixels from the bottom. The script works as intended for screen widths 992px and above (as per conditional if (debounce_bodyWidth >= 992)) but it is still executing for dimensions below this.

Is there something about $(window).scroll that means it is executed irrespective of conditionals?

(function ($) {
    contactDebounce = function () {
        var debounce_bodyWidth = $(window).width();
        if (debounce_bodyWidth >= 992) {
            $(window).scroll(function () {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();

                if (distanceFromBottom <= 1200) {
                    $('.sticky-element').addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    $('.sticky-element').removeClass('hide');
                    $('.sticky-element').css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    $('.sticky-element').css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            });
        }
    }
    contactDebounce();
    $(window).on("debouncedresize", contactDebounce);
})(jQuery);

Upvotes: 0

Views: 1450

Answers (1)

Dhunt
Dhunt

Reputation: 1594

What you are doing is binding a function to $(window).scroll on page load if the bodyWidth >= 992, this condition is never run again as all that is run on scroll is inside the scroll function you have created.

EDIT: It has been pointed out in comments that this is run again, on debounced resize. The problem then is that the scroll function has already been set when the condition is true and is not unset when the condition becomes false. You can either unset the event and check again on resize or add the condition inside the event and stop running the check on resize.

Try this, adding the condition inside the event:

(function ($) {
    contactDebounce = function () {
        $(window).scroll(function () {

            var debounce_bodyWidth = $(window).width();
            if (debounce_bodyWidth >= 992) {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();
                var stickyElement = $('.sticky-element');

                if (distanceFromBottom <= 1200) {
                    stickyElement.addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    stickyElement.removeClass('hide');
                    stickyElement.css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    stickyElement.css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            }
        });
    }

    contactDebounce();
})(jQuery);

Or this, unbind when smaller, rebind when bigger:

(function ($) {
    contactDebounce = function () {
        var debounce_bodyWidth = $(window).width();
        if (debounce_bodyWidth >= 992) {
            $(window).scroll(function () {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();
                var stickyElement = $('.sticky-element');
                if (distanceFromBottom <= 1200) {
                    stickyElement.addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    stickyElement.removeClass('hide');
                    stickyElement.css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    stickyElement.css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            });
        }
        else
        {
            $(window).unbind('scroll');
        }
    }

    contactDebounce();
    $(window).on("debouncedresize", contactDebounce);
})(jQuery);

Upvotes: 3

Related Questions