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.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-150){
isShown = true;
$('.footer-btn').fadeIn(500);
}else{
$('.footer-btn').fadeOut(500);
}
});
</script>
+2
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'):
$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; /* 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>
</div>
+1
source to share