A cleaner way for a fixed div at bottom of the window but stays above the footer and triggers on page width

问题

I've created a sticky bar to stay at the bottom of the window. As the user scrolls down to the bottom of the page the same bar will stay fixed until the footer shows, then removes its fixed position, temporarily, to stay above the footer until the user scrolls back up and it remains fixed again.

I only want to happen when the page is wider than 680px. Anything under that will keep the sticky bar in a default position (CSS: position:inherit).

This is the website: http://ttd.firefly-digital.co.uk

It works as expected. However, when I test on Chrome in Mac it triggers my CPU fan which suggests this not very efficient and with my limited JavaScript skills, wondered if there is a cleaner way to achieve this is?

This is the current js code:

$(window).scroll(function(event) {

    var scroll = $(this).scrollTop();
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var footerHeight = $('.footer').height();

    if(docHeight - (windowHeight + scroll) < footerHeight) {
        $('.contact-bar').css({
            bottom: footerHeight - (docHeight - (windowHeight + scroll))
        });
    } else {
        $('.contact-bar').css({
            bottom: 0
        });
    }

});

var windowWidth = $(window).width();

$(window).resize(function() {
    windowWidth = $(window).width();

    if(windowWidth > 680) {
        $('.contact-bar').css({
            position: "fixed"
        });
    } else {
        $('.contact-bar').css({
            position: "inherit"
        });
    }

});

CSS code

.contact-bar {
    background: $contact-bar;
    width: 100%;
    height: 40px;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 10;
}

回答1:

You can do it in reverse. Make it so that the bar, without position fixed, is above the footer without any JavaScript (incl. media queries). Than add a fixed class with position:fixed and bottom:0 that will be added accordingly. Like so:

.contact-bar.fixed { position:fixed; bottom:0; }

The jquery code that will trigger this, is as follows:

$(window).scroll(function (event) {
   var windowTop = $(this).scrollTop();        
     if (windowTop >= $(".footer").offset().top) {
        $(".contact-bar").addClass("fixed");
      } else {
        $(".contact-bar").removeClass("fixed");
      }
});

Then add a few lines that the above code will only fire if the window width is > 680, either with jquery or pure javascript. For example with:

  if ($(window).width() < 960) { // above function }

Do note I have not tested this, so please comment if it doesn't work. Credit: Preventing element from displaying on top of footer when using position:fixed

回答2:

You better use classes to target your elements, at least to prevent jQuery from traversing the whole DOM using selectors appropriately which is good in performance.

来源：https://stackoverflow.com/questions/27985099/a-cleaner-way-for-a-fixed-div-at-bottom-of-the-window-but-stays-above-the-footer

标签

javascript

jquery

html

css

fixed