Home/ Questions/Q 8279911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T09:28:58+00:00

I’m having trouble triggering two events – one at one scroll position, one at

  • 0

I’m having trouble triggering two events – one at one scroll position, one at another.
As you’ll see below I’m trying to have div #one appear once the user reaches 300px, while div #two will appear after 600px.

CSS:

    <style type='text/css'>
        body {
            height:5000px;   
        }

        #base {
            position:fixed;
            width:300px;
            height:250px;
            margin-left:100px;
            margin-top:0;
            background-color:blue;   
            z-index:1;   
        }

        .feature {
            position:fixed;
            width:300px;
            height:250px;
            margin-left:100px;
            }

        #one {
            margin-top:250px;
            background-color:red;  
            z-index:2;    
            }

        #two {
            margin-top:500px;
            background-color:yellow;  
            z-index:3;    
            }

    </style>

JS:

    <script type='text/javascript'>
        $(window).load(function(){
            $(document).ready(function(){

                $(document).scroll(function() {

                    var top = $(document).scrollTop();

                    if (top > 300) {
                        $('#one').show();
                    }
                    else if (top > 600) {
                        $('#two').show();
                    } 
                    else {
                        $('.feature').hide();
                    }   

                });
            });
        });

    </script>

HTML:

<body>
    <div id="base"></div>
    <div id="one" class="feature"></div>
    <div id="two" class="feature"></div>  
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first problem I see is with your if else logic. If your top is greater than 300 it will do this:

    $('#one').show();

    but will then exit the conditional statement not checking the other if parts.

    I have created a fiddle to show how the code could be done to acheive what you are looking for: http://jsfiddle.net/fGWq5/

    I also started the two divs with their display properties set to none so it wont display until triggered by the scroll event.

    • 0