Javascript 背景：覆盖标题图像，菜单始终位于屏幕底部

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

大概是这样的：

这是我现在得到的：

html:

js:

})

小提琴：

---

谢谢你花时间帮忙

我不确定这是否是您的意思，但我认为您希望minhaClass div占据视口的100%

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

html,body{
    height: 100%;
}

取消注释minhaClass中的高度

}

接下来是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');
    }
});
});

---

在这里，您可以做更多的工作来改进它，例如，高度变量b考虑到了覆盖菜单的高度，因此您的菜单不会变得粘乎乎的，直到您滚动通过它来修复，您可以使用此变量b=$window.height-$'.menu bottom'.height，从b中减去菜单div的高度

它看起来像粘在我身上，到底是什么问题？

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

html,body{
    height: 100%;
}

.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%;

$(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');
    }
});
});