Javascript 在页脚处消失的粘性div

我建立了一个通讯子框，是粘到底部。我在网站底部有一个静态通讯子框。我希望当我的粘性物体到达底部时，它会漂浮在它下面，如果它完全被覆盖，它就会消失。我认为对于解决方案，我必须使用javaskcript，但我没有这方面的经验。如果有人能帮我就好了

这基本上是我的粘性时事通讯子框：

<div id="newsletter" class="m-newsletter_störer">
   <div class="m-newsletter_störer-container"> </div>
</div>

我的静态子框：

<div id="newsletter" class="m-newsletter">
   <div class="m-newsletter-container"> </div>
</div>

我还希望我的粘性子框在页面上10秒后出现

$(window).scroll(function() {
   $("#newsletter").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
       //Bottom of the page
       $("#newsletter").addClass("viewport-bottom");
   }
});

---

如果您还需要其他帮助来写评论的话。

我对JavaScript不太在行，但我不久前实现了类似的功能

当用户滚动位置接近页面底部时，可以隐藏粘性子框

$(window).scroll(function() {
   $("#newsletter").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
       //Bottom of the page
       $("#newsletter").addClass("viewport-bottom");
   }
});

您可以将

400

值更改为添加“viewport bottom”类之前距页面底部的高度

然后用css淡出该类的不透明度。

为什么不试试z索引呢

---

将较低的zindex放在粘性tr上，将较高的zindex放在页脚上

请添加更多代码以重现您的问题。。。。

$(window).scroll(function() {
   $("#newsletter").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
       //Bottom of the page
       $("#newsletter").addClass("viewport-bottom");
   }
});