Hide CSS before scroll-CodePudding

I'm working on developing infinite scroll on my wordpress website, so I have two "Back-to-top" and "Go-to-bottom" buttons. They do their job, but I would like them to remain hidden until the user scrolls a bit. Is there a way to do it through CSS? Everything I tried just failed.

Here's the code I'm using for the buttons:

<div style="position: fixed; bottom: 70px; right: 25px; z-index: 900">
<a href="#top">
    <img  src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" alt="Boton subir" width="40" height="40">
  </a>
</div>
<div style="position: fixed; bottom: 25px; right: 25px; z-index: 900">
  <a href="#fin">
    <img  src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" alt="Boton bajada" width="40" height="40">
</div>

I tried adding margin-top: 100vh, which would be my ideal solution, and some of the code shared by Afif Temani here, but I can't make it work.

Thanks for your time and help!

CodePudding user response：

Add below CSS and JS and it will hide button initially; and show up when you scroll

//JavaScript
window.onscroll = function() {toggleScrollButton()};

function toggleScrollButton() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    jQuery(".btn-nav-vertical.top").show();
    jQuery(".btn-nav-vertical.fin").show();
  } else {
    jQuery(".btn-nav-vertical.top").hide();
    jQuery(".btn-nav-vertical.fin").hide();
  }
}

///css -- add in Customizer > CSS
.btn-nav-vertical.top,
.btn-nav-vertical.fin {
    display: none;
}

CodePudding user response：

The whole solution is a bit complicated. Let me demonstrate in a JSFiddle. Try it.

HTML

Added a CSS class to the buttons' DIV.

<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p >When you scroll to here, display the buttons</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<p>Some contents here</p>
<div style="position: fixed; bottom: 70px; right: 25px; z-index: 900" >
<a href="#top">
    <img  src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Top.svg" alt="Boton subir" width="40" height="40">
  </a>
</div>
<div style="position: fixed; bottom: 25px; right: 25px; z-index: 900" >
  <a href="#fin">
    <img  src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" data-src="https://imthemoisturizer.com/wp-content/uploads/2022/04/Bottom.svg" alt="Boton bajada" width="40" height="40">
    </a>
</div>

CSS

I set the buttons to hide initially.

.btn_controls {
  display: none;
}

JavaScript (require jQuery)

If you don't want to use jQuery, you can replace two lines with $ with vanilla JavaScript document.getElementByClassName('btn_controls') bla bla bla.

// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

function loop() {

    Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        $('.btn_controls').show();
      } else {
        $('.btn_controls').hide();
      }
    });

    scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

p.s. IMO as you're developing websites, you must learn JavaScript.