isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
 on April 4, 2020
Last modified on January 7th, 2022

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

By James LePage
 on April 4, 2020
Last modified on January 7th, 2022

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
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram