Disable A Whole Function When Window Size Is Below 770px

What would I do to Disable the whole following Function when the window size is below 770px? and Enable it again when the screen size is above 770px... Can we do it using JavaScrip

Solution 1:

If you want to fire the function when the page loads, and when someone resizes the screen above 770px;

// Fire when the page loadsstickyBox();

// Fire on page resize
$(window).resize(stickyBox);

// Our functionfunctionstickyBox() {

    if($(window).width() > 770) {

        $.fn.scrollBottom = function () {
            return $(document).height() - this.scrollTop() - this.height();
        };

        var $StickyBox = $('.detailsBox');
        var $window = $(window);

        $window.bind("scroll resize", function () {
            var gap = $window.height() - $StickyBox.height() - 10;
            var visibleFoot = 255 - $window.scrollBottom();
            var scrollTop = $window.scrollTop();

            if (scrollTop < 50) {
                $StickyBox.css({
                    top: (130 - scrollTop) + "px",
                    bottom: "auto"
                });
            } elseif (visibleFoot > gap - 100) {
                $StickyBox.css({
                    top: "auto",
                    bottom: visibleFoot + "px"
                });
            } else {
                $StickyBox.css({
                    top: 80,
                    bottom: "auto"
                });
            }
        });

    }

}

Solution 2:

You could use a flag to keepTrack of the window size (I see you're using jQuery, so I assume it is loaded):

var smallScreen = false;

$(document).ready(function() {
    smallScreen = $(window).width() < 770;
});

$(window).resize(function() {
    smallScreen = $(window).width() < 770;
});

And then use it when you call your function:

function doSomething() {
    if(smallScreen) {
        //do your stuff here
    }
}

Solution 3:

You just need to disable the callback to your resize and scroll event listener. You can do this by wrapping your logic in a test for the window height.

Note that bind has been deprecated, it's best to use on() instead. You should also be very careful with the scroll event. Here is a good article on why and how to avoid the performance problems it can cause.

Working Demo

$window.on("scroll resize", function () {
    if ($window.width() > 770) {
        var gap = $window.height() - $StickyBox.height() - 10;
        var visibleFoot = 255 - $window.scrollBottom();
        var scrollTop = $window.scrollTop();

        if (scrollTop < 50) {
            $StickyBox.css({
                top: (130 - scrollTop) + "px",
                bottom: "auto"
            });
        } elseif (visibleFoot > gap - 100) {
            $StickyBox.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $StickyBox.css({
                top: 80,
                bottom: "auto"
            });
        }
    }
});

Solution 4:

Use JQuery .width() and .height() functions to get the size of the window and then perform the operation needed.

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document