how can I make a div stick to the top of the screen once it's been scrolled to and unstick once it hits the footer?

Question

I found this solution and need to modify it so that when it hits the footer it unsticks. I know there is no scroll_bottom, so I was thinking of trying to create a variable for the footer, like below. I will keep plugging away, however, was hoping maybe someone could help out.

$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
    $mainMenuBar = $('#mainMenuBar'),
    $mainMenuBarAnchor = $('#mainMenuBarAnchor');

// Run this on scroll events.
$window.scroll(function() {
    var window_top = $window.scrollTop();
    var window_bottom = $window.height() - this.scrollTop() - this.height(); 
    var div_top = $mainMenuBarAnchor.offset().top;
    if (window_top > div_top) {
        // Make the div sticky.
        $mainMenuBar.addClass('stick');
        $mainMenuBarAnchor.height($mainMenuBar.height());
    }
    else if (window_bottom > div_top) {
     $mainMenuBar.removeClass('stick');
        $mainMenuBarAnchor.height(0);
    }
    else {
        // Unstick the div.
        $mainMenuBar.removeClass('stick');
        $mainMenuBarAnchor.height(0);
    }
});

});

I also found this solution, but can not get it working with jquery 1.7.

It currently doesn't work. Trying to unstick when it hits the footer. — HanSoloShotFirst, May 13 '14 at 01:25
It says in the title it should unstick when hitting the footer, no? — display-name-is-missing, May 13 '14 at 01:25
Sorry. I need to have the "sticky panel" div unstick if it hits the footer. Here is my work in progress. http://jsfiddle.net/hansoloshotfirst/T4D52/1/ — HanSoloShotFirst, May 13 '14 at 01:40
Ah. Yes. Thanks, this works. However, it is doing a weird flicker on my local dev site. It looks like something to do with the #mainMenuBarAnchor height dynamically getting set. Maybe there is a way to run this without using the #mainMenuBarAnchor? Either way, your fix works, it might just be something with my local site. How do you select your answer as correct solution? — HanSoloShotFirst, May 13 '14 at 02:09

display-name-is-missing · Answer 1 · 2014-05-13T11:37:55.480

This seems to do the job:

HTML

You said you wanted a solution without using #mainMenuBarAnchor, so delete:

<div id="mainMenuBarAnchor"></div>

from your HTML code.

JS

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $menuBarOffset = $mainMenuBar.offset().top,
        window_top = 0,
        footer_offset = $("#footer").offset().top,
        content = $("#content"),
        panel_height = $mainMenuBar.outerHeight()+'px';


    // Run this on scroll events.
    $window.scroll(function() {
        window_top = $window.scrollTop();

        if (window_top >= $menuBarOffset) {
            if (window_top >= footer_offset) {
                // Unstick the div.
                $mainMenuBar.removeClass('stick');
                content.css('margin-top', 0);
            } else {
                // Make the div sticky.
                $mainMenuBar.addClass('stick');
                content.css('margin-top', panel_height);
            }
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            content.css('margin-top', 0);
        }
    });
});

The code is a little longer now than before, but that's mainly because I added a few variables in the beginning so that you don't have to calculate some stuff on every scroll (like footer offset, the menu bar offset..).

jsFiddle demo

how can I make a div stick to the top of the screen once it's been scrolled to and unstick once it hits the footer?

1 Answers1