Question 14459 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Hide CSS before scroll – WordPress

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 class=" lazyloaded" 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 class=" lazyloaded" 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!

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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 class="show-on-scroll">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" class="btn_controls">
<a href="#top">
    <img class=" lazyloaded" 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" class="btn_controls">
  <a href="#fin">
    <img class=" lazyloaded" 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search