How to add/remove styles on an element when the scroll is at the bottom?

Question

I'm trying to build a "sticky" toolbar at the bottom of my page, which is always displayed, even if there is scroll.

So currently, I've something similar to this: https://www.codeinwp.com/snippets/sticky-footer-with-css/

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

header, footer {
  background: white;
  padding: 5px;
  text-align: center;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
}

main {
  text-align: center;
  padding: 14px 0 100px 14px;
}

button {
  padding: 7px 10px;
  margin: 0 0 8px 0;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

<header><h2>Sticky Footer with Position Fixed</h2></header>
  <main>
    <p>This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.</p>
  </main>
  <footer><h2>Sticky Footer</h2></footer>

Which works, but I would like to hide the shadow once the user has scrolled to the bottom.

How would you proceed?

Answer 1

I do not believe HTML or CSS has any way to natively detect if a user has scrolled to the bottom of a page/window. Because of this, your best option for this would be JavaScript.

You could attach an event listener to the window so that when the user scrolls, you check to see if they have reached the bottom of the page or not. This can be done using properties of the window like window.innerHeight and window.scrollY, which combined should be equal to or greater than the height of the document (which we can get using document.body.getBoundingClientRect()["height"]).

So this gives you your desired result, but unfortunately it is not purely an HTML/CSS solution.

window.addEventListener("scroll", e => {
  if(window.innerHeight+window.scrollY >= document.body.getBoundingClientRect()["height"]) {
    document.querySelector("footer").style.boxShadow = "none";
  } else {
    document.querySelector("footer").style.boxShadow = "0 -1px 1px rgba(0, 0, 0, 0.1)";
  }
});

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

header, footer {
  background: white;
  padding: 5px;
  text-align: center;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
}

main {
  text-align: center;
  padding: 14px 0 100px 14px;
}

button {
  padding: 7px 10px;
  margin: 0 0 8px 0;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

<header><h2>Sticky Footer with Position Fixed</h2></header>
  <main>
    <p>This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically.<br><br>If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically.<br><br>If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically.<br><br>If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport.<br><br>Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport.<br><br>Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically.<br><br>If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo.<br><br>The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.</p>
  </main>
  <footer><h2>Sticky Footer</h2></footer>