2

scrolleramaとsuperscrolleramaを認識しています。

私はそれらの両方と数日間苦労しました。そして、ピン留めだけのためにそれらを機能させることはできません。アニメーションとタイプのサポートは必要ありません。サンプル ドキュメントを使用して、HTML コンテンツを一度に 1 ブロック要素ずつ削除しようとすると、改ページされます。scrollerama は、例全体が存在する場合にのみ機能するようです。またはもっと可能性が高い.... 私はそれを理解するほど頭が良くありません。

私がやりたいのは、タグを固定してから<h1></h1>、特定のタグに到達したときに固定を解除することだけです。

この質問もここで見ました: CSS Trouble with Pinned Header Divですが、まったく機能していないようです。

コード例:

    <!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    </style>
    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<article>
    <header></header>
    <section id="wrap">

        <h1> Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>

        <h1> Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>

        <h1>Pin this when it hits the window top</h1>
        <div class="innercontent">
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p>inner content here</p>
        <p class="unpin">Unpin the previous h1 tag when this hits window top</p>
        </div>
    </section>
    <footer></footer>
</article>
</body>
</html>

どこかのjquery関数の例へのリンクは非常に役立ちます。または、scrollerama を pin/upin 機能だけに落とす方法の簡単な説明が役立ちます。

追加：

sbeliv01 はこの質問を提案しました: jQuery を使用して現在の位置に最も近い要素を見つける方法

ただし、余白が調整されている場合 (HTML5 のリセット)、そのメソッドは失敗します。要素にマージン調整がまったくない場合にのみ機能します。スタイルのない div で H1 タグを単純にラップしようとすると、ページのスクロール時にひどいちらつきが発生します。

これは機能しませんが、必要に応じて使用できるように jsFiddle をセットアップしまし
た 。

4

2 に答える 2

2

それを少し操作し、Phillip Wills の提案を使用した後、コードが劇的に良く機能しているように見える場所に落ち着きました。

以前使っていたif/else文は問題ありませんでした。問題は単にjqueryで使用する位置にあったようです。

機能的なjquery:

  $(function(){
    $(window).bind('scroll', function() {
        $('.info').each(function() {
          var pin = $(this);
          var inner = pin.next().position().top - $(window).scrollTop();
          var ptop = pin.height() + 20;

            if (inner < ptop) {
                pin.addClass('pinned');
            } else {
                pin.removeClass('pinned');
            }
        });        
    });
});

主な問題は、次のオブジェクトの上部を見つけることでした。Phillip はこれを手伝い、固定されたオブジェクトの上部を見つけて、スクロールするためのスペースを少し追加しました。

Functional jsFiddle demo here

于 2013-03-29T01:09:20.740 に答える
1

値を微調整する必要があるかもしれませんが、else を使用する代わりに 2 番目の if ステートメントを作成するとうまくいくようです...これは、無名関数内の更新されたコードです。

var bottom = pin.next().position().top + pin.next().height() - $(window).scrollTop();
var inner = pin.next().position().top - $(window).scrollTop();
console.log(position, bottom, inner);

if (position <= 0 && bottom >= 50 && inner <= 15) {
   pin.addClass('pin');
} 
if (bottom <= 30 || inner >= 15) {
   pin.removeClass('pin');
}

更新されたフィドルへのリンクは次のとおりです。http://jsfiddle.net/ffdFd/3/

于 2013-03-28T21:58:32.000 に答える