Show/Hide the Image based on Scrolling in Javascript

Question

I have to show/hide the image based on scrolling. But the condition here is, if the user scrolls up and down many times near the page top/bottom, the image should not fade in and fade out repetitively. It should listen for 1 sec before fade in. Below is the logic that i tried.

Code

<div class="a" style="height: 300px;width: 300px;background-color: green;position:fixed;">
</div>

var $toTop = $('div.a');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
    $toTop.fadeIn();
} else if ($toTop.is(':visible')) {
    $toTop.fadeOut();
}
});

Answer 1

You can do this by saving a timeout in jquery main data object that waits for a second to execute whenever scroll event is fired. The event also clears any previously registered timeouts:

 var $toTop = $('div.a'); $(window).scroll(function() { clearTimeout($.data(this, 'waitASecond')); $toTop.stop(); $.data(this, 'waitASecond', setTimeout(function() { if ($(window).scrollTop() > 100) { $toTop.fadeIn(); } else if ($toTop.is(':visible')) { $toTop.fadeOut(); } }, 1000)); });

 body { height:1000px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> Scroll Down and wait.... <div class="a" style="height: 700px;width: 300px;background-color: green;display:none"></div> </body>

Show/Hide the Image based on Scrolling in Javascript

Question

1 answers

solution1
1 2016-01-08 07:35:49

Show/Hide the Image based on Scrolling in Javascript

Question

1 answers

solution1 1 2016-01-08 07:35:49

solution1
1 2016-01-08 07:35:49