How to make fixed scroll stick only till a certain section-CodePudding

I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here : https://jumia.co.ke

HTML

<a href="#" >Scroll Up</a>

CSS

.show-scroll-btn {
   position: fixed;
   transition: 350ms ease-in;
   bottom: 20px;
   z-index: 999;

}

  const scrollToTop = document.querySelector('.scroll-to-top');

// Add event listener to make button appear when scrolling down
const showBtn = window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
        scrollToTop.classList.add('show-scroll-btn');
    } else {
    scrollToTop.classList.remove('show-scroll-btn');
    }
});

CodePudding user response：

Your approach was good, the only thing that wasn't working is that you had the condition window.scrollY > 300, meaning the program only gave the class show-scroll-btn after the user has scrolled 300px down. All that was needed to be changed is the condition to window.scrollY < 300 as now the element has the class as long as the site's scrollY is below 300, and when it gets over 300, its being removed.

const scrollToTop = document.querySelector('.scroll-to-top');

// Add event listener to make button appear when scrolling down
const showBtn = window.addEventListener('scroll', () => {
    if (window.scrollY < 300) {
        scrollToTop.classList.add('show-scroll-btn');
    } else {
    scrollToTop.classList.remove('show-scroll-btn');
    }
});

.show-scroll-btn {
   position: fixed;
   top: 0;
   transition: 350ms ease-in;
   z-index: 999;

<a href="#" >Scroll Up</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CodePudding user response：

You can use the position: sticky CSS property.

Here's a guide on how to use it

CodePudding user response：

Add This CSS

.scroll-to-top {
       position: sticky;
       transition: 350ms ease-in;
       top:calc(100% - 60px);
       z-index: 999;
       background:#fff;
       padding:5px; 
       right:20px;
       }

.scroll-to-top {
   position: sticky;
   transition: 350ms ease-in;
   top:calc(100% - 60px);
   z-index: 999;
   background:#fff;
   padding:5px; 
   right:20px;
   }

<p>
<a href="#" >Scroll Up</a>
I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :</p>
<div>
stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain section as a fixed position makes it go all the way to the footer. Is there a way I can make it stop just before the footer? A good example I found was here :I made a fixed scroll to top button, once you scroll 300px it shows itself. I wanted to go further and make the button only stick till a certain se further and make the button only stick till a certain section as a fixed found was here :
</div>