Question

默认情况下，Magellan（Foundation中的Sticky navigation插件）会添加元素“top”属性。我想要阻止它，因为我也修复了topbar，所以导航就在下面。我的导航节目是动画的，所有属性都是通过CSS添加的，所以我只需要阻止直接添加top: 0px内联div。

我的代码看起来：

<div class="sticky bar" data-magellan-expedition="fixed">...</div>

我的CSS：

.sticky.bar.fixed {
   bottom: auto;
   padding-bottom: 6px;
   z-index: 98;
   top:45px;
   animation:subnav_sticky .2s;
   -webkit-animation:subnav_sticky .2s;
}

@keyframes subnav_sticky
{
   from {top:-33px;}
   to {top:45px;}
}
@-webkit-keyframes subnav_sticky /* Safari and Chrome */
{
   from {top:-33px;}
   to {top:45px;}
}

没有编辑JavaScript插件可以吗？

Answer 1

我找到了一些东西。

joseluisq使用Javascript的答案很棒。我无法在CSS中添加！important，因为它在Firefox中打破了动画。但我在Foundation GitHub repository找到了解决方案。没有人将其添加到文档中......

解决方案只是将data-magellan-top-offset添加到元素中。所以在我的问题中它将是：

<div class="sticky bar" data-magellan-expedition="fixed" data-magellan-top-offset="45">...</div>

我希望它会有所帮助;）

Answer 2

好的，我看到你要为Magellan重写top属性，Magellan通过javascript添加了顶级属性值，所以你可以尝试使用你的css中的!important重写这个属性，用于你的其他顶级导航器。 /> 另一种解决方案是使用javascript替换最需要的值：

$(window).scroll(function(){
   $('div[data-magellan-expedition=fixed]').css('top', 'your top value');
});

祝你好运！

Answer 3

我是这样做的，希望它有所帮助。

您可以使用类似这样的内容在javascript中配置magellan，如基金会的website

中所述

$(document).foundation({
"magellan-expedition": {
  active_class: 'active', // specify the class used for active sections
  threshold: 0, // how many pixels until the magellan bar sticks, 0 = auto
  destination_threshold: 20, // pixels from the top of destination for it to be considered active
  throttle_delay: 50, // calculation throttling to increase framerate
  fixed_top: 0, // top distance in pixels assigend to the fixed element on scroll
  offset_by_height: true // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
}
});

名为'fixed_top'的字段中有一个定义nav元素顶部距离的字段。确保将其设置为0并且它应该可以工作。请注意，应该最后加载它以确保它不会被覆盖。

基金会中的麦哲伦 - 防止为元素添加“顶级”风格

3 个答案: