Question

我想创建一个带有全宽/高背景图像的标题。菜单必须始终位于页面加载的最底部或调整大小。滚动时，菜单在屏幕顶部显示时会在顶部变粘。

像这样：http://www.themarmalade.com/

这就是我现在所得到的：

HTML：

<div class="minhaClass">
    <div class="menu-bottom">menu</div>
</div>
<div class="content"></div>

的CSS：

   div{
    width:100%;
    height:350px;
}
.minhaClass{
    background: url(http://placehold.it/550x350) no-repeat center center;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*height:100%;*/
}
.menu-bottom {
    position: absolute;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 3rem;
line-height: 3rem;
background-color: #5454b9;
color: #fffdfa;
text-align: center;
}
.content {
    width: 100%;
    height: 800px;
    background: grey;
}
.sticky {
    position: fixed;
    bottom: inherit;
    top: 0;
}

JS：

$(document).ready(function() {
var w = $(window);
w.on("scroll", function(){
    if(w.scrollTop() >= 305){
        $('.menu-bottom').addClass('sticky');
    }
    else {
        $('.menu-bottom').removeClass('sticky');
    }
});

}）;

小提琴：http://jsfiddle.net/6ejv9/80/

感谢您抽出宝贵时间提供帮助！

Answer 1

我不确定这是不是你的意思，但我认为你希望minhaClass div占据视口的100％。

如果是这种情况，请添加以下内容：

html,body{
    height: 100%;
}

取消注释minhaClass

中的高度

.minhaClass{
background: url(http://placehold.it/550x350) no-repeat center center;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;

}

接下来是jquery，我们需要获取视口的高度，这可以使用$( window ).height();

来完成

所以你更新的jquery将是

$(document).ready(function() {
var w = $(window);
var b = $( window ).height();
w.on("scroll", function(){
    if(w.scrollTop() >= b){
        $('.menu-bottom').addClass('sticky');
    }
    else {
        $('.menu-bottom').removeClass('sticky');
    }
});
});

您可以在此处执行更多操作来改进它，例如高度var b会考虑覆盖菜单，因此您的菜单不会变得粘稠，直到您滚过它来修复您可以减去高度b使用此var b = $( window ).height() - $('.menu-bottom').height();

菜单div

背景：封面标题图像，菜单始终位于屏幕底部

1 个答案: