1

2 つのイベント (1 つはあるスクロール位置で、もう 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/

また、表示プロパティを none に設定して 2 つの div を開始したため、スクロール イベントによってトリガーされるまで表示されません。

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

window load後に発火しdocument readyます-ネストした方法では、何も起こりません。

また、今後質問される可能性がある場合は、問題をすべてダンプするのではなく、特定のコードに絞り込むことをお勧めします。

于 2012-07-23T04:03:27.913 に答える