0

非常に基本的なセットアップ: title-shim-container。shimにより、ページの読み込み時にコンテナーがウィンドウの下部に保持され、バックグラウンドでビデオ ライブ ストリーム用のスペースが確保されます。

コンテナが上にスクロールされてタイトルに到達すると、タイトルは画面から押し出され、元の位置にドロップダウンします。コンテナーは、jQuery Isotope プラグインによって相対的に配置されます。それは変更できません。

私がこのフィドルで得た最初の部分はこちらです。しかし、2 番目の部分を機能させるにはどうすればよいでしょうか。ここまでしかできなかった:(

jQuery.event.add(window, "load", shimming);
jQuery.event.add(window, "resize", shimming);
    
function shimming() {
    var wheight = $(window).height();
    $('#shim').css('height', (wheight - 63));
} // this part up to here works

$(window).bind("load resize scroll", function () {
    var wheight = $(window).height();
    console.log(wheight);
    var wscrolled = $(window).scrollTop();
    console.log(wscrolled);

フィドルを提供せずに以前の投稿でこれを求めたので、それらの投稿を削除したほうがよいですか?

アドバイスをありがとう...

4

1 に答える 1

1

あなたが何を求めているのか理解するのに少し時間がかかりました。フィドルのコメントは、実際にはここでの質問よりも役に立ちましたが、これはあなたが何をしようとしているのかを捉えていると思います:

if (wscrolled > wheight - 187) {
    $('#title').css('position', 'absolute');
    $('#title').css('top', (wheight - 123));
} else if (wscrolled <= wheight - 187) {
    $('#title').css('position', 'fixed');
    $('#title').css('top', 64);
}

187 は、タイルの高さと余白の合計と、シムによって残されたギャップ スペースから得られます。123 は、タイトルの高さと、すべてを正しく並べるためのギャップ スペースです。

-- 編集 --

多くのスクロールが行われる場合、既存の設定が繰り返し設定されるのを防ぐために、else if 条件を追加する価値があると思います。

于 2012-07-12T00:23:57.207 に答える