0

I have a page like this:

----------------------
.header
----------------------


.content
   .hidden-element (fixed right side)


----------------------
.footer
----------------------

I want to show the hidden element when you only scroll on content section.

For example you start to scroll down from header section. When you come to content section, hidden element will appear. If you scroll down again and come to footer section, hidden element will be hidden again.

How can I do that?

grylmz
  • 1
  • 1
  • 2
  • possible duplicate of https://stackoverflow.com/questions/4837772/jquery-how-can-i-trigger-an-event-when-a-div-comes-into-view – Deepak A Mar 30 '19 at 07:37

1 Answers1

0
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {

                $('.myDiv').hide(1000);
            }
            else {
                $('.myDiv').show(1000);
            }
        });
    </script>
    <br />
    <div style="height:400px"></div>

    <div class="myDiv">
        <ul>
            <li>Arunachal Pradesh</li>
            <li>Himachal Pradesh</li>
            <li>Uttar Pradesh</li>
            <li>Madhya Pradesh</li>
            <li>Andhra Pradesh</li>
        </ul>
    </div>

    <div style="height:1000px"></div>
</body>
</html>

please check the above code this sample code is so easy 2 main functionn $(window).scroll() is detect scroll event of page if($(this).scrollTop() > 300) check the pixel of scrolling from top of page when is more than 300 then hide the div or show the div in else condition.

Razmik Ghookas
  • 118
  • 5