Show loader (gif) image when scroll up and down to specific element in jQuery

Last Reply 9 days ago By dharmendr

Posted 9 days ago

hi

refer below thread

Show loader (gif) image when scroll to specific element using jQuery

here when I scroll down page and reach to

<span id="lblScroll">Scroll for display loader</span>

the gif file will show and if I scroll up it will be hide

I want when I scroll down and reach to the

<span id="lblScroll">Scroll for display loader</span>

it will show gif file (untill now every things are ok) and if I scroll down more and pass from

<span id="lblScroll">Scroll for display loader</span>

it will hide gif file (here it will hide just when I scroll up from <span id="lblScroll">Scroll for display loader</span>)

how I can do it?

Best regards

Neda

Posted 9 days ago Modified on 8 days ago

Hi nedash,

Check this example. Now please take its reference and correct your code.

HTML

This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
<div id="lblScroll" style="border: 1px solid red;height:100px;width:75%;background-color:antiquewhite;">Scroll for display loader</div>
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
<div id="dvImage" align="right" style="display: none;border: 1px solid red;position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;background-color:burlywood;">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt="Alternate Text" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#dvImage').hide();
        $(window).scroll(function () {
            var hT = $('#lblScroll').offset().top;
            var hH = $('#lblScroll').outerHeight();
            var wH = $(window).height();
            var wS = $(window).scrollTop();
            if ((wS > (hT - wH)) && (wS < (hT + hH))) {
                $('#dvImage').show();
            } else {
                $('#dvImage').hide();
            }
        });
    })
</script>

Screenshot