hi
I want when users scroll down the page and reach to the special section it will appear .gif file at the corner bottom of the page
how I can do it?
Best regards
Neda
Hi nedash,
Refer below sample 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
© COPYRIGHT 2024 ASPSnippets.com ALL RIGHTS RESERVED.