在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; 
}