2

私はこれらの例をいくつか見ましたが、私のものは少し異なり、これを理解することはできません。

私はこれらのフォーラムで見つかったjQueryの一部を使用して、固定divを特定のポイントまでスクロールしてから、「scrollTop」を使用して停止します。

var windw = this;

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 40
            });
        }
    });
};

$('#scrollto-menu-nav').followTo(250);

ただし、上からではなく下からの高さに達したときにスクロールを停止する必要があります。何か案は？

ありがとう、R

4

1 に答える 1

2

あなたはこのようなことをすることができます：

HTML

<img src=//ph.artsinn.de alt>
<div>
    <p>A short line of text, for better interpretation.</p>
    <p>Followed by another line, filled with letter and words</p> 
</div>

<img src=//ph.artsinn.de/240x160/666?text=scroll%20down alt id=obj>

<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt class=end>

<div>
    <p>A short line of text, for better interpretation.</p>
    <p>Followed by another line, filled with letter and words</p> 
</div>

<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>
<img src=//ph.artsinn.de alt>​

CSS

/* not needed */
html,body{height:200%}
img {display:block}​

JS

$(function() {
    var $window = $(window),
        $sidebar = $("#obj"),
        sidebarTop = $sidebar.position().top,
        sidebarHeight = $sidebar.height(),
        $footer = $(".end"),
        footerTop = $footer.position().top;

    $sidebar.css('position', 'fixed');
    $window.scroll(function(e) {
        scrollTop = $window.scrollTop();
        topPosition = Math.max(0, sidebarTop - scrollTop);
        topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
        $sidebar.css('top', topPosition);
    });
});​

そして、再び、フィドルとして。

于 2012-08-12T15:17:10.077 に答える