As a beginner in the field of web development, I am currently working on creating a blog website.
Code Function - One of the challenges I'm facing is implementing a floating pagination bar that needs to be hidden when a visitor scrolls near the footer of the page.
My code and what I've attempted so far-
I have tried using JavaScript to calculate the position of the footer element on the page and then determine when to hide the pagination bar based on the visitor's scroll position. Here is a snippet of my code:
var footerPos = document.querySelector("footer").offsetTop;
var partOfScreen = screen.height * 0.08;
var pointToHide = footerPos - screen.height + partOfScreen;
console.log(`footerPos- ${footerPos} ; pointToHide- ${pointToHide} ; screen.height - ${screen.height}`);
window.onscroll = function() {
if (window.scrollY > pointToHide) {
document.getElementById("pagination").style.transform = "scale(0)";
} else {
document.getElementById("pagination").style.transform = "scale(1)";
}
}<ul class="pagination pagination-rounded justify-content-center" id="pagination" style="
position: fixed;
bottom: 4vh;
transform: scale(1);
/*this is the property which should change to - scale(0) - on scroll*/
margin: 0 auto;
z-index: 1000;
transition: all 0.2s, transform 0.2s cubic-bezier(0.5, 0, 1, 2);
">
<li class="page-item" style="border-radius: 50px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);">
<a class="page-link" href="#" onclick="window.history.back()" style="border-radius: 55px;">
<i class="int-arrow-left"></i>
</a>
</li>
<li class="page-item active" style="border-radius: 50px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);">
<a class="page-link" href="#">1 </a>
</li>
<li class="page-item" style="border-radius: 50px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.8);">
<a class="page-link" href="https://www.zealforgood.com/test-categories?index=9" style="border-radius: 55px;">
<i class="int-arrow-right"></i>
</a>
</li>
</ul>In the above <script>
The script involves calculating the position of the footer element and setting up an event listener for scrolling to determine when to hide the pagination bar near the footer. I have shared the live source code link for reference.You can see this code live on this website's source
Despite several attempts, I have not been able to achieve the desired functionality. I would appreciate any help or suggestions to troubleshoot the issue as I am more comfortable with plain JavaScript rather than jQuery.