javascript - body が特定のポイントに達したときのみ HTML CSS 固定要素

Question

メソッドが何であるか、またはどのように達成されたのかわかりません。しかし、今後のプロジェクトで使用する可能性があるため、それについて知りたいと思っています。私が言及しているのは、ブロック要素が特定の X/Y 軸にある場合、それが固定位置要素であるかのように機能しなくなったように見えることです。それ以外の場合、要素は固定位置要素として機能します。

これは、ヘッダーとフッターが大きく、ヘッダーの下部またはフッターの上部に到達すると、要素が固定要素として機能しなくなるナビゲーションでよく見られます。

Answer 1

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

$(window).scroll(function(){    
    if ($(this).scrollTop() > 250){ 
        $('#top').css('position','fixed'); 
    }
    else{
        $('#top').css('position','static');
    }
});

より良いアプローチは、

$(window).scroll(function(){    
    var top =  $('#top'); 
    if ($(this).scrollTop() > 250){
        if(top.css('position') !== 'fixed'){ 
            top.css('position','fixed'); 
        }
    }
    else{
        if(top.css('position') !== 'static'){
            top.css('position','static');
        }
    }
});

Answer 2

これを行うプラグインがあります。これは私が以前に使用したものです。比較的成功したリンクです。素晴らしい例もあります。

しかし、自分でやりたい場合は、それほど難しくありません。コンセプトは少し複雑です。何かを に変更すると、 の場合のようpositionにfixedスペースを占有しませんstatic。

この問題に遭遇したとき、同じ場所に 2 番目のアイテムを作成しました (表示する場所によっては表示されない場合もあります)。これは表示されません。次に、ウィンドウが固定されていないオブジェクトscrollTopの座標より大きいかどうかをチェックするロード/スクロール イベントを実装します。topそうであれば、固定オブジェクトを表示します。

このようなもの：

$("#yourObject").each(function() { // The ID should be the FIXED object.
    var $me = $(this);
    var $heightRival = $("#anotherObject"); // This ID should be the non-fixed object.
    $me.hide(); // Hide your fixed div.
    $(window).bind("load scroll",function() {
        var offset = $heightRival.offset(); // Get the document offset of the base object.
        var height = $heightRival.outerHeight(); // Get the height of the base object.
        if ($(window).scrollTop() > offset.top+height)
            $target.show(); // Can be a fade in, slide in, whatever.
        else
            $target.hide(); // Can be a fade out, etc.
    });
});

これは初歩的なコードにすぎませんが、正しい方向に進むはずです。

Answer 3

このプラグイン、または同様のプラグインをご覧ください: http://www.orangecoat.com/stickyscroll