横幅未出现在页面上

所以，我想要的是当我向下滚动浏览我的网站时，当我到达某个页面(在这种情况下是contact页面(时，我希望结束横幅(更多详细信息见下文(立即出现在网站的右下角。它基本上是在说再见，你可以选择关闭结束横幅或保持打开。

示例：

(function() {
requestAnimationFrame(function() {
var banner1;
banner1 = document.querySelector('.exponea-banner1');
banner1.classList.add('exponea-in1');
return banner1.querySelector('.exponea-close1').addEventListener('click', function() {
return banner1.classList.remove('exponea-in1');
});
});
}).call(this);

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body1 {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner1 {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.exponea-banner1.exponea-in1 {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner1 .exponea-close1 {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner1 .exponea-label1 {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner1 .exponea-text1 {
margin-bottom: 8px;
}
.exponea-banner1 .exponea-count1 {
font-weight: 500;
}
.exponea-banner1 .exponea-label1 {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner1,
.exponea-close1,
.exponea-text1,
.exponea-label1,
.exponea-label21 {
z-index: 10;
}
<! ------- CSS of introduction banner------------------ --> 
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.exponea-banner.exponea-in {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner .exponea-close {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner .exponea-label {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner .exponea-text {
margin-bottom: 8px;
}
.exponea-banner .exponea-count {
font-weight: 500;
}
.exponea-banner .exponea-label {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner,
.exponea-close,
.exponea-text,
.exponea-label,
.exponea-label2 {
z-index: 10;
}

<section>
INTRODUCTION</section>
<section>
<br>
<body>
<script>
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner');
banner.classList.add('exponea-in');
return banner.querySelector('.exponea-close').addEventListener('click', function() {
return banner.classList.remove('exponea-in');
});
});
}).call(this);
</script>
<div class="exponea-banner">
<div class="exponea-close">
&times;
</div>
<div class="exponea-text">
Hi there! Thanks for stumbling upon my website!
</div>
<div class="exponea-label">
- Hussain Omer
</div>
</div>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
<h2> contact section </h2>
<!-- ======= Contact Section ======= --> -->
<link rel="stylesheet" href="assets/css/bannerclose.css">
<body>
<div class="exponea-banner1">
<div class="exponea-close1">
&times;
</div>
<div class="exponea-text1">
Thanks for visiting! &#58398;
</div>
</div>
<div class="exponea-label1">
- Hussain Omer
</div>
</div>

所以我举了一个例子，我已经在我的网站上包含了开始横幅，就像介绍横幅一样，一切都很好。当我向下滚动到联系人部分时，结束横幅或我想要显示的横幅不太起作用。

我该如何使该人员向下滚动到联系人部分时，横幅才会出现在页面底部附近？因为现在它出现在整个网站上，但我希望最后的横幅(上面有"感谢访问"的信息(只出现在联系人部分之后。

请帮忙，已经两天了，我还是想不出办法。

使用此检测，如果用户已到达页面末尾，并通过单击关闭图标启用关闭：

const toast = document.getElementById("toast");
const toastClose = document.getElementById("toastClose");
window.onscroll = function (b) {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
toast.classList.add("open");
}
};
toastClose.addEventListener("click", function () {
toast.classList.remove("open");
});

代码笔：https://codepen.io/manaskhandelwal1/pen/ExgdzWd

实时链接：https://stackoverflow-sidekick12.netlify.app/

相关内容

最新更新

热门标签：