CMS Development

dtempleton
Participant

How do I prevent a Vertical Advanced Menu from overlapping the footer

I have tried a number of things. Any ideas on what I can try next to prevent the overlap when you scroll to the bottom of the page?

0 Upvotes
2 Replies 2
stefen
Key Advisor | Partner
Key Advisor | Partner

How do I prevent a Vertical Advanced Menu from overlapping the footer

You'll need to use some javascript to add some logic to change from pisition fixed to static or relative. There are a bunch of plugins out there that will do this for you such as this one: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

 

CSS can do this natively using position: sticky; but it still lacks some browser support.

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
dtempleton
Participant

How do I prevent a Vertical Advanced Menu from overlapping the footer

Thank you!

 

I ended up trying a solution I found here: http://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer

 

This is working for me so far. I still have some testing to do.

$(window).scroll(function () { 

// distance from top of footer to top of document
footertotop = ($('#footer').position().top);
// distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
scrolltop = $(document).scrollTop()+570;
// difference between the two
difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin

if (scrolltop > footertotop) {

$('#cart').css('margin-top',  0-difference);
}

else  {
$('#cart').css('margin-top', 0);
}

});

 

 

0 Upvotes