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);Code language: JavaScript (javascript)

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;
}Code language: CSS (css)

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>Code language: HTML, XML (xml)

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) {
    $('.<em>cta</em>').fadeIn();
  } else {
    $('.<em>cta</em>').fadeOut();
  }
});Code language: JavaScript (javascript)

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
}Code language: CSS (css)
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
deepanshu
deepanshu
1 year ago

thank you so much dude, you're awesome!!!!!
it worked πŸ˜€

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram