Question

我在div.wrapper中有一个菜单，我希望div.wrapper能够粘贴到页脚

<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>

我怎么能这样做？我的代码jsfiddle。我无法将此菜单从.wrapper移至.footer。如果我在页面上移动滚动，我想让这个菜单贴在我的页脚上。

Answer 1

检查此更新fiddle。我想这样你就可以实现它。您不需要任何JavaScript / JQuery代码来执行此操作，只有CSS应该足够了。

CSS类的变化：

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

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

position:fixed会处理窗口滚动。看一下bottom添加到classes的{{1}}属性。对于footer，0为menu，60px为bottom。您可以更改menu中的z-index值，以便按照您想要的方式定位。footer会将其置于footer之上。

此外，您应该使用footer tag而不是类{{1}}的div。

Answer 2

像这样使用：

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

如果你只是想移动使用它：

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

如果你想滚动时使用这样的东西：

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

demo

demo with scroll

如何将div粘贴到页脚？

2 个答案: