scss sticky_footer.js

Posted 2021-05-18

jQuery(document).ready(function($) {

    if ($('.sticky-footer').length > 0) { // Checks to make sure this page has a sticky element before proceeding

        var stickyFooter = $('.sticky-footer');
        var stickyWrapper = $('.footer-wrapper'); // Always want a wrapper to prevent sticky element from jumping when changing its position (relative vs. fixed)

        $(stickyFooter).addClass('fixed');

        // grab the initial bottom offset of the footer
        var sticky_footer_offset_top = $('.footer-wrapper').offset().top + $('.footer-wrapper').outerHeight(true);

        // the function that decides weather the navigation bar should have "fixed" css position or not
        var sticky_footer = function(footerOffset) {
            offset = footerOffset;
            var distanceFromBottom = $(window).scrollTop() + $(window).height(); // the current vertical position from the bottom of the page

            // if user scrolled more than the footer, change its position to relative put it back into the flow of the window, otherwise change it back to fixed
            if (distanceFromBottom > offset) {
                $(stickyFooter).removeClass('fixed');

            } else {
                $(stickyFooter).addClass('fixed');
                // $('#header').css("margin-top", 0);
            }
        };

        // run the function on load
        sticky_footer(sticky_footer_offset_top);

        // and run it again every time you scroll
        $(window).on('scroll', function() {
            sticky_footer(sticky_footer_offset_top);
        });

        // and run it again every time you resize
        $(window).on('resize', function() {
            sticky_footer_offset_top = $('.footer-wrapper').offset().top + $('.footer-wrapper').outerHeight(true);
            sticky_footer(sticky_footer_offset_top);
        });

    } else {
        // Do nothing
    }

});

.footer {
    &-wrapper {
        height: 60px;
        position: relative;
    }
}

.sticky-footer {
    position: relative;
    height: 60px;
    &.fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }
}
 Add Another File