如何将div粘贴到页脚？

Question

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.

Answer 1

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 .

Answer 2

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