Reputation: 660
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
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
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');
});
Upvotes: 0