1

我无法触发两个事件——一个在一个滚动位置，一个在另一个。
正如您将在下面看到的，我试图div #one在用户到达时出现300px，而div #two在之后出现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>
4

2 回答 2

2

我看到的第一个问题是你的 if else 逻辑。如果您的顶部大于 300，它将执行以下操作：

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

但随后将退出条件语句而不检查其他 if 部分。

我创建了一个小提琴来展示如何完成代码以实现您正在寻找的内容：http: //jsfiddle.net/fGWq5/

我还启动了两个 div，它们的显示属性设置为 none，因此在滚动事件触发之前它不会显示。

于 2012-07-23T04:10:51.217 回答
0 
$(window).load(function(){
    $(document).ready(function(){

window load之后触发document ready- 所以你嵌套它的方式，你什么都不会发生。

此外，对于您将来可能提出的问题，我建议将问题缩小到某段代码，而不是倾倒所有代码。

于 2012-07-23T04:03:27.913 回答