css-position - zurb Foundation のサイドバーを修正

Question

Foundation 4.0 フレームワークを使用してサイトを構築しています

また、 Bootstrap Affix機能と同様の固定サイドバーが必要です。

これが私の例です。正しいhabd div.panelを修正したいと思います。ただし、CSS で修正すると、構造が壊れます。

誰かが前にこのようなことをしたことがありますか? 私はマゼランのアドオンを見て、それが理解できるかどうかを確認しましたが、別の動物のように見えます.

Answer 1

独自のフローティング ナビゲーションを構築してみることができます。このコードは私のために働きます：

$("document").ready(function(e) {        

    $("#floatingNav").css("z-index", "99999").css("right", "0").css("position", "absolute");

    // get initial top offset of navigation 
    var floating_navigation_offset_top = $('#floatingNav').offset().top;

    // define the floating navigation function
    var floating_navigation = function(){

        // current vertical position from the top
        var scroll_top = $(window).scrollTop(); 

        // if scrolled more than the navigation, change its 
        // position to fixed to float to top, otherwise change 
        // it back to relative
        if (scroll_top > floating_navigation_offset_top) { 
            $('#floatingNav').css({ 'position': 'fixed', 'top':0, 'right': $('h4.titleImage').offset().left, 'width': 158 });
        } else {
            $('#floatingNav').css({ 'position': 'relative', 'right':0, 'width':158 }); 
        }   
    };

    // run function on load
    floating_navigation();

    // run function every time you scroll
    $(window).scroll(function() {
        floating_navigation();
    });
});

それをカスタム js ファイルに追加し、ナビゲーションfloatingNavIDを指定します。

出典:フローティング ナビゲーション バーの作成方法

PS: サイドバーの幅が変わらないように、元のコードに数行追加しました。好きなように削除/変更してください。

Answer 2

Foundation は固定クラスを提供します。固定クラスを使用して、サイド ナビゲーションを div でラップするだけです

<div id="nav" class="fixed">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

次に、css で、上からの高さまたは左の位置を指定できます。

#nav {
  top: 100px;
}