Fixed div scroll stop after

Question

I am working on a menu, that is fixed to the right side of the page. I am using some JavaScript that keeps the menu in it's fixed position until the site reaches a specific spot (243px from the top - which clears my header). All of this is working as I intended...but I'm looking for a way for the menu to stop scrolling at a specific number of pixels from the bottom (To clear my footer - 600px).

The JavaScript looks like:

$(window).scroll(function(){
    $("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});

The HTML looks like:

<div class="menu">
    <div id="side">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
</div>

The CSS looks like:

.menu {
    right: 0;
    position: absolute;
    top: 243px;
    width: 250px;
    z-index: 5;
}

#side {
    background: #ace;
    position:fixed;
    width: 250px;
}

JS Fiddle: https://jsfiddle.net/050dqcea/
Original solution (scrolling from top): Stopping fixed position scrolling at a certain point?

Right now, I've adjusted the z-index of the footer so the menu just goes behind the footer, which isn't too bad, but if the menu would disappear when the scroll reached the footer I think that would function better. — Josh Rodgers, Apr 23 '18 at 19:19
Not sure if just me but I'm having trouble understanding what it is you are trying to do. Are you trying to have this element scroll up only until it is a certain number of pixels from the top, and only down until a certain number of pixels from the bottom? Does the menu fill the side height? — Ognami, Apr 23 '18 at 19:27

score 1 · Accepted Answer · answered Apr 23 '18 at 20:19

I think I understand now, the fiddle didn't have jQuery loaded so it just wasn't running as intended.

You can change how you want this to show or hide, that's up to you. I'd make a bit of a comment about how irritated your users might be that the menu disappears but that is up to you to decide. Alternatively you can use these triggers to "refix" your menu. The world is your oyster, etc.

I've used $("#side").offset().top here. The idea is to check when the menu's bottom has scrolled to the top of the footer. Then to bring it back we check if the vertical scroll is less than the offset of the top of the footer.

A fiddle for you: https://jsfiddle.net/5p90s06n/1/

So, essentially I have two menus on the page...one is the page menu and one is the meta menu. The page menu includes all of your navigation items...which always shows. This one is the meta menu, which only pertains to the blog...which is why if we've scrolled past the blog the menu can disappear. You definitely answered my question, I appreciate your help! — Josh Rodgers, Apr 23 '18 at 21:00

Fixed div scroll stop after

1 Answers1