CODEWITHSUNDEEP
jqueryjquery-plugins
user1049961
user1049961

Reputation: 2736

Jquery - stick div to bottom of the page

I found many plugins that allow me to stick navigation to the top of the page, or footer to the bottom of the page.

However, I have a div in the middle of the page, and would need to stick it at the bottom, until the user scrolls to it.

Is there any plugin for this?

Upvotes: 0

Views: 1200

Answers (1)

joe
joe

Reputation: 405

Yes! you can use waypoints.js http://imakewebthings.com/jquery-waypoints/

Then you can make a call like this:

$('.element').waypoint(function(direction){
    if(direction == 'down'){
        $(this).addClass('active');
    }else{
        $(this).removeClass('active');
    }
},{offset:'100%'});

Then for css you can do this

.sticky-container.active .stick-me {
    position:relative;
}

.sticky-container .stick-me {
    background: blue;
    height: 50px;
    position:fixed;
    bottom:0;
}

.content {
    height: 1000px;
}

Just be aware that if you add the fixed css property to the element in my example marked ".element" then it may go a bit screwed up. It's best to make sure that the div ".element" is actually the wrapper to the element that you want the fixed css property to be assigned to.

Edit*: Sorry misread your question, thought you wanted it sticky when you scrolled to the element. I've updated the css above to suit you & your jsfiddle, please note the "offset" which I've set to 100%, this means it will add a class when in comes into the bottom of the viewport: http://jsfiddle.net/MNa7n/2/

Upvotes: 1

Related Questions