3

ユーザーが div を超えてスクロールするときは、css を position:fixed に変更する必要があります。ここで行われていることとよく似ています: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ただし、プラグインなしで単純な jquery を使用します。
ユーザーが別の div にスクロールしたら、div のスクロールも停止する必要があります。
例えば：

<div id="stuff"></div>
<div id="this"></div>//must start scrolling with user when user reaches it.
<div id="footer"></div>// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap

私は .scroll()and.css()を使用すると仮定していますが、そこからどこへ行くべきかわかりません。

4

3 に答える 3

3

これが最終的に私のために働いたものです：

    jQuery(document).ready(function() {
    var topOfrel = jQuery("#this").offset().top;
    var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); 
    var topOffootero = topOffooter ;
    var boxheight = jQuery(window).height() - 130;//adjusting for position below
    jQuery(window).scroll(function() {
        var topOfWindow = jQuery(window).scrollTop();
        if (topOfrel < topOfWindow && topOffooter > topOfWindow) {
            jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px");

        } else {
            jQuery("#this").css("position", "static");
        }
    });
});
于 2013-04-21T09:10:19.853 に答える
0

あなたが参照するページはjQueryを使用しています：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">

また、表示されない他のJavascriptも含まれています

ちなみに、ここで見ることができます：

http://imakewebthings.com/jquery-waypoints/waypoints.js
http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js

彼が使用する機能はそこで見ることができますが、それが簡単な答えだとは言えません。彼のスクリプトに基づいて、ページの読み込み後にリスナーを要素にアタッチします。

<script type="text/javascript">
    $(document).ready(function() {
        $('.my-sticky-element').waypoint('sticky');
    });
</script>

特定の質問がある場合は、質問してください。ただし、多くの人がスクリプト全体を説明することはないと思います。

于 2013-04-21T08:06:52.877 に答える