R Picheta
R Picheta

Reputation: 660

How to stick a div to the footer?

I have a menu in div.wrapper, I want the div.wrapper to stick to the footer

<div class="wrapper">
    <div id="menu">
        <ul>
            <li>1.</li>
            <li>2.</li>
            <li>3.</li>
        </ul>
    </div>
    <div class="push"></div>
</div>

<div class="footer">
    <div id="footer-menu"></div>
</div>

How I can do that? My code jsfiddle . I cant move this menu from .wrapper to .footer. If I move scroll on page I want to have this menu stick with my footer.

Upvotes: 0

Views: 129

Answers (2)

Niranjan Borawake
Niranjan Borawake

Reputation: 1638

Check this updated fiddle. I think this way you can achieve it. You don't need any JavaScript/ JQuery code to do it only CSS should be sufficient.

Changes in CSS classes :

.footer {
    position : fixed;
    bottom : 0;
    height: 155px;
    background-color : red;
    width : 100%;
}

#menu{
    position : fixed;
    bottom : 60px;
    z-index : 1;
}

position:fixed will take care of window scroll. Take a look at bottom property added to both the classes. For footer it is 0 where as for menu it is 60px. You can change bottom value in menu to position it the way you want.z-index will bring it above the footer.

Also, you should use footer tag rather than a div with class footer.

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use like this:

$('#menu').appendTo('.footer').css('position','fixed');

If you just want to move use this:

$('#menu').appendTo('.footer');

And if you want when you scroll use something like this:

$(window).on('scroll',function(){
//code in when to move
var t = $(window).scrollTop();
if(t>300)
    $('#menu').appendTo('.footer');
});

demo

demo with scroll

Upvotes: 0

Related Questions