As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open.
For example:
(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">
×
</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>
<h2> contact section </h2>
<!-- ======= Contact Section ======= -->
<link rel="stylesheet" href="assets/css/bannerclose.css">
<body>
<div class="exponea-banner1">
<div class="exponea-close1">
×
</div>
<div class="exponea-text1">
Thanks for visiting! 
</div>
</div>
<div class="exponea-label1">
- Hussain Omer
</div>
</div>I have an existing start banner on my website that works fine. However, I'm having trouble getting the end banner to appear only after scrolling down to the contact section.
Any suggestions on how to make the end banner appear near the bottom of the page specifically when reaching the contact section? Currently, it's showing up throughout the website instead of just at the designated point.
I would appreciate any assistance, as I've been struggling with this issue for the past couple of days.