在zurb基礎

Question

我建立使用foundation 4.0 framework

一個網站，我想一個固定的側邊欄，類似於Bootstrap Affix功能固定的邊欄。

這是我的例子，我想正確的habd div.panel被修復。通過CSS修復它會破壞結構。

有沒有人做過這樣的事情？我看了一下麥哲倫插件，看看我能否理解它，但它看起來像一種不同的動物。

Answer 1

我認爲麥哲倫是你最好的選擇，如果你只想堅持基礎。 雖然它不完全相同，但它可以定製以提供類似的功能。 在此issue tracker中，awshout發佈fiddle作爲一個粘性側邊欄的示例。 在小提琴中，他在導航中使用了選項卡類。

<ul class="magellan tabs vertical" data-magellan-expedition="fixed"> 
    <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li> 
    <li data-magellan-arrival="tabs"><a href="#tabs">Tabs</a></li> 
    <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li> 
</ul> 

如果你想有一個固定側導航以及固定頭部還有在跟蹤其他一些有用信息。

除了麥哲倫，你可以嘗試使用第三方插件一樣stickyMojo.js

Answer 2

您可以嘗試建立自己的浮動導航。此代碼的工作對我來說：

$("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文件，給導航floatingNav ID

來源：How to Build a Floating Navigation Bar

PS：我加了幾行的原代碼，這樣側邊欄的寬度不會改變。刪除/更改您喜歡的方式。

Answer 3

Foundation爲您提供固定課程。只需使用固定類

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

然後你可以在你的CSS指定高度包裹你身邊的資產淨值在一個div您從頂部或位置向左想要它。

#nav { 
    top: 100px; 
}