1

ユーザー プロフィール ページの大きなカバー写真で Google+ が行うことを再現したいと考えています。最初は大きく、特定のポイントを過ぎてスクロールすると、ヘッダー (カバー写真とタブ ナビゲーション) が position:fixed に変わり、固定されます。上にスクロールすると、写真が再び拡大されます。他の Web サイトでも、ナビゲーションにこれを実装しています (つまり、Techcrunch)。実際には、div を表示/非表示/アニメーション化するという複雑さは必要ありません。div がくっつくと、少し違って見えます。位置を修正する必要があるだけです。

他の投稿を見つけましたが、私の試みはどれもうまくいきません。ブラウザウィンドウを使用してスクロールしているのではなく、内部のdivを使用していることに注意してください...だから、それが私が台無しにしているかどうかはわかりません。

edit* は、提供されたコメントに基づいて新しいアプローチで更新されました。それでも完璧ではありません。新しく固定された領域はスクロールできません。さらに、上の領域が固着すると、スクロール可能なままの領域が「ジャンプ」します（おそらく、それらはすべてフローティングされており、以前にフローティングされていたdivが欠落/修正されているためです。これを打ち消すためにボディセクションにマージントップを追加しようとしましたが、そうではありません）動作しません。

とにかく、ここに次のjQueryとjsfiddleがあります：

http://jsfiddle.net/md3DV/43/

$('#contentMain').scroll(function(){

    if ($('#contentMain').scrollTop() > 255) {

        $(this).children('#mainInfoProfileContainer').addClass('stick');

        $(this).children('#mainNavContainerProfile').addClass('stick');

        $(this).children('#body').addClass('stick');

    }

    else {

        $(this).children('#mainInfoProfileContainer').removeClass('stick');

        $(this).children('#mainNavContainerProfile').removeClass('stick');

        $(this).children('#body').removeClass('stick');

    }

});

編集* また、フィドルで複製できないという問題があります。特定の場所にスクロールすると、div が前後にジャンプし、修正を拒否します... 2 つの競合するイベントが発生しているようです。ただし、フィドルの同じコードでは発生しません...

4

0 に答える 0