[英]sticky div that disappers at the footer
I build a newsletter sub box that is sticky to the bottom.我建立了一个粘在底部的时事通讯子框。 I have at the bottom of the Site a static newsletter sub box.我在网站底部有一个静态通讯子框。 I want that when my sticky one reaches the one at the bottom that it floats under it and than disappers if its fully covered.我希望当我的粘性物体到达底部的物体时,它会漂浮在它下面,如果它被完全覆盖,它就会消失。 I think for the solution I must use JavaSkript but I have no experience with it.我认为对于解决方案,我必须使用 JavaSkript,但我没有使用它的经验。 It would be nice if someone can help me.如果有人可以帮助我,那就太好了。
This is basicly my sticky newsletter sub box:这基本上是我的粘性通讯子框:
<div id="newsletter" class="m-newsletter_störer">
<div class="m-newsletter_störer-container"> </div>
</div>
and the css:和CSS:
.m-newsletter_störer {
background:green;
max-width: 900px;
margin: auto;
position: sticky;
bottom: 0;
&-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
@include media('>phone') {
padding: 3rem 1rem;
}
}
my static sub box:我的静态子框:
<div id="newsletter" class="m-newsletter">
<div class="m-newsletter-container"> </div>
</div>
and the css:和CSS:
.m-newsletter {
background: $green;
&-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
@include media('>phone') {
padding: 3rem 1rem;
}
}
Also I want that my sticky sub box appers after 10s on the page.另外我希望我的粘性子框在页面上显示 10 秒后。
If you need anything else to help write a comment.如果您需要其他任何东西来帮助撰写评论。
Im not amazing at JavaScript, but I implemented something similar a while back.我在 JavaScript 方面并不出色,但我不久前实现了类似的东西。
You can hide the sticky sub box when the users scroll position is near the bottom of the page.当用户滚动位置接近页面底部时,您可以隐藏粘性子框。
$(window).scroll(function() {
$("#newsletter").removeClass("viewport-bottom");
if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
//Bottom of the page
$("#newsletter").addClass("viewport-bottom");
}
});
You can change the 400
value to be the height from the bottom of the page before the 'viewport-bottom' class is added.在添加 'viewport-bottom' 类之前,您可以将400
值更改为距页面底部的高度。
Then just fade the opacity with css for that class.然后只需使用该类的 css 淡化不透明度。
为什么不试试 z-indexes 在粘性 tr 上放一个较低的 zindex,在页脚上放一个高的 zindex
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.