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

Question

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

Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on [so]. See "[Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts). BTW, it's "Thanks in advance", not "Thanks in advanced". — John Saunders, Jan 16 '15 at 17:31
Wow, quite finicky about things here then. No worries, I'll keep my politeness to myself. And appreciate your grammar correction. My dyslexia is really frustrating, I try, but sometimes it slips through. — Jack Barham, Jan 16 '15 at 17:54
Please click the link I included. You may better understand why we're "finicky" about "politeness". — John Saunders, Jan 16 '15 at 17:59
Got it, get to the point. Must be nice to have this much time on your hands :) — Jack Barham, Jan 16 '15 at 18:04
No. Search for "thanks" is fast, I use canned comments, so it's the kind of thing I can do while waiting for compiles to finish. — John Saunders, Jan 16 '15 at 18:09

score 1 · Answer 1 · edited May 23 '17 at 12:23

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

Thanks, I'll take look over the next few days when I'm back at my computer and I'll let you know. A quick glance suggests that I can use some of this to clean up my code. Leave it with me... — Jack Barham, Jan 16 '15 at 17:11

score 0 · Answer 2 · answered Jan 16 '15 at 16:53

0

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.

answered Jan 16 '15 at 16:53

Nima

2,100
2
23
32

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

2 Answers2

Linked