Question

我无法触发两个事件 - 一个在一个滚动位置，另一个在另一个滚动位置正如您在下面看到的那样，一旦用户到达div，我会尝试#one 300px，而div #two会出现在{{1}之后}}。

CSS：

600px

JS：

    <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>

HTML：

    <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>

Answer 1

我看到的第一个问题是你的if else逻辑。如果您的top超过300，它将执行此操作：

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

然后退出条件语句，不检查其他部分。

我创建了一个小提琴来展示如何完成代码以实现您的目标：http://jsfiddle.net/fGWq5/

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

Answer 2

$(window).load(function(){
    $(document).ready(function(){

在window load之后

document ready开火 - 所以你嵌套它的方式，你什么都不会发生。

此外，对于您可能会问的未来问题，我建议将问题缩小到某段代码，而不是倾销整个代码。

jQuery：在不同的滚动位置触发不同的事件

2 个答案: