javascript - div fade-in when window is scrolled a certain distance from the top -
i have following script in <head> tag animates div when window 150px bottom. not sure how alter animates when distance top.
<script> $(window).scroll(function() { if($(window).scrolltop() + $(window).height() == $(document).height()-150){ isshown = true; $('.footer-btn').fadein(500); }else{ $('.footer-btn').fadeout(500); } }); </script>
here's jquery script use in site set animation top.
change value of offset() control fade-in activation position.
jquery(document).ready(function($) { // browser window scroll position (in pixels) button appear // adjust number select when button appears on scroll-down var offset = 200, // duration of animation (in ms) scroll_top_duration = 700, // bind button link $animation = $('.animation'); // display or hide 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 .3s 0s, visibility 0s .3s; } .visible { visibility: visible; /* 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> </div>
Comments
Post a Comment