Div Fade-in When Window Is Scrolled A Certain Distance From The Top

I have the following script in my tag which animates my div when the window is 150px from the bottom. I am not sure how to alter it so it animates when a certain dista

Solution 1:

Here's a jQuery script that I use in a site to set the animation from the top.

Change the value of offset() to control the fade-in 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-downvar 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'):
      $animation.removeClass('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 .3s0s, visibility 0s .3s;
}
.visible {
  visibility: visible;  /* the button becomes visible */opacity: 1;
}

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

http://jsfiddle.net/zmz6g8kh/4/