How To Show An Element After Scrolling Halfway Down The Page (JS)

Published: April 4, 2020

If you have an element that is sticky on the page, such as a call to action button, toggle links visibility based on the scroll position of the page could be a simple way to make it pop out and get more interaction. In this article, we will show you how to toggle the visibility of any element based on the scroll position of a page. This answer will use vanilla JavaScript, but will link you to a resource that describes several other ways to do this.

Here's the code that we're going to use to toggle the visibility of an element depending on how far the user is scrolled down the page. In this example, the element remains hidden until the user has scrolled 800 pixels down the page, meaning that they are quite interested in the content, and dynamically popping up a call to action button in the lower right hand corner may lead to a conversion event.

myID = document.getElementById("customID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "cta show"
  } else {
    myID.className = "cta hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

With this answer, we need to incorporate some custom CSS which dictates the visibility of the element.

.cta {
    position: fixed;
    bottom: 20px;
    right:20px;
    width: 60px;
    height: 60px;
    border-radius:50%;
    background: red;
    z-index: 1;
    transition: all 1s;
}
.hide {
    opacity:0;
    left:-100%;
}
.show {
    opacity:1;
    left:0;
}

The code essentially states that the element (identified by its ID and class) will have the hidden class applied to it until the scroll position is greater than 800 pixels. The hidden class in CSS has an opacity of zero. Once the scroll position exceeds 800 pixels, the hidden class is changed to the show class, which has an opacity of 1, making it visible on the screen.

The CTA itself starts out looking like this:

<div id="customID" class="cta hide"></div>

This code was grabbed and adapted from this incredible StackOverflow answer, Which has tons of more detailed information if you are interested in using JavaScript (or jQuery) to dynamically show and hide elements based on the scroll position of a page.

In that same answer, the commenter posted the following jQuery code, which is a bit easier to use than vanilla JavaScript, and works on WordPress as JavaScript is already included.

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.cta').fadeIn();
  } else {
    $('.cta').fadeOut();
  }
});

Here, the only thing you need to adapt is the number of pixels needed to toggle the visibility of the element, and the class name of the element.

This is a better solution because it doesn't require any additional CSS show/hide classes. However, you do need to initially set the element to not display, like so:

.cta {
display: none
}
Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram