Div fade out when the window is scrolled a certain distance from the top

I have the following script in a tag <head>

that animates mine div

when the window is 150px from the bottom. I'm not sure how to change it so that it animates when some distance from the top.

  $(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()-150){
  isShown = true;



source to share

1 answer

Here's the jQuery script I'm using on the site to set the animation on top.

Change the value offset()

to control the fade activation position.

jQuery(document).ready(function($) {

  // browser window scroll position (in pixels) where button will appear
  // adjust this number to select when your button appears on scroll-down
  var offset = 200,

    // duration of the animation (in ms)
    scroll_top_duration = 700,

    // bind with the button link
    $animation = $('.animation');

  // display or hide the button
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $animation.addClass('visible'):


#container {
  height: 800px;
#button {
  border: 1px solid black;
  padding: 10px;
  width: 100px;
  text-align: center;
  background-color: chartreuse;
.animation {
  position: fixed;
  bottom: 25px;
  right: 25px;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
.visible {
  visibility: visible;  /* the button becomes visible */
  opacity: 1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>SCROLL DOWN</p>
  <a id="button" class="animation">BUTTON</a>

Run codeHide result




All Articles