css-position - zurb 基础中的固定侧边栏

Question

我正在使用基础 4.0 框架构建站点

我想要一个固定的侧边栏，类似于Bootstrap Affix功能。

这是我的示例，我希望修复正确的 habd div.panel。然而，通过 CSS 修复它会破坏结构。

有没有人做过这样的事情？我看过 Magellan 插件，看看我是否能理解它，但它看起来像另一种动物。

Answer 1

如果您只想坚持使用粉底，我认为麦哲伦是您最好的选择。虽然它不完全相同，但可以对其进行定制以提供类似的功能。在这个问题跟踪器中，awshout 发布了一个小提琴作为粘性侧边栏的示例。在小提琴中，他使用带有导航的选项卡类。

<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>

如果您想要一个固定的侧导航和一个固定的标题，跟踪器中还有一些其他有用的信息。

除了 Magellan，你可以尝试使用第三方插件，比如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 文件并提供导航floatingNavID

资料来源：如何构建浮动导航栏

PS：我在原始代码中添加了几行，以便侧边栏的宽度不会改变。以您喜欢的方式删除/更改它。

Answer 3

Foundation 为您提供固定类。只需使用固定类将侧导航包装在 div 中

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

然后，您可以在您的 css 中指定您希望它从顶部或左侧位置的高度。

#nav {
  top: 100px;
}