0

ページウィッチjQuery scrollToをスクロールしています。たとえばy= 300の場合、ページがいくつかのピクセルに達すると、divがスライドインします。

手動でスクロールする場合は、その div もスライドさせたいと思います。

どうすればそれを達成できますか?

イベントリスナーのようなものを考えました。jQuery.scroll は存在しますが、「手動」スクロールと「自動」スクロール (scrollTo を使用) に違いはありません。

私は別の試みをするべきですか？

ありがとうございました！

4

2 に答える 2

0

質問を正しく理解している場合、通常のスクロール イベントを聞いているときに、ページがどれだけスクロールされたかがわからないという問題がありますか?

scrollTop プロパティhttp://javascript.gakaa.com/div-scrollleft-2-0-scrolltop.aspxを確認してみてください。

おそらくこれらの線に沿った何か：

$('my-selector').attr( 'scrollTop' )
于 2009-11-04T02:06:14.667 に答える
0

ページがスクロールされると、表示されて消える div の色が変わるようなものに取り組んでいます。

これをチェックしてください：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>

    $(window).scroll(function () { 


        if(window.pageYOffset >= "150" || window.pageYOffset <= "170")
        {
            $("#1").css('background', 'green');                 
        }
        else if(window.pageYOffset < "150" || window.pageYOffset > "170")
        {
                $("#1").css('background', 'none');              
        }
    });


    </script>


</head>
<body>      

<div style="width:600px">
    <div id="1">
    <h1>1</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="2">
    <h1>2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="3">
    <h1>3</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="4">
    <h1>4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="5">
    <h1>1</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="6">
    <h1>2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="7">
    <h1>3</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="8">
    <h1>4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="9">
    <h1>1</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="10">
    <h1>2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="11">
    <h1>3</h1>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
    <div id="12">
    <h1>4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
    </div>
</div>
</body>
    </html>

これをチェックして：

http://www.w3schools.com/jsref/prop_win_pagexoffset.asp

window.pageYOffset window.pageXOffset

于 2012-02-16T23:00:36.230 に答える