粉底粘性麦哲伦不工作答案

【问题标题】：Foundation sticky magellan not working粉底粘性麦哲伦不工作
【发布时间】：2017-04-20 20:28:50
【问题描述】：

我正在尝试创建一个小导航，在点击时将我带到某些 div。它会这样做，但目前它只是捕捉到 div。相反，我希望平稳过渡，就像它在documentation 中所说的那样。

此外，当我向下滚动到某些 div 时，我希望突出显示必要的 nav li。但是当我检查它们上的元素时，它们不会在我向下滚动页面时突出显示.. 它肯定会选择 css cdn，但 js 不是很确定。

头部（我使用的是cdn）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">


<section id="div1_wrapper" data-magellan-target="div1_wrapper">

<div class="leftHeaders" data-sticky-container>
    <ul class="sticky" data-sticky data-magellan>
        <li><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></li>
    </ul>
</div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">

</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">

</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
</section>

【问题讨论】：

[jsfiddle.net/ek4sp8w5/1] 类似这样的滚动？？
不，更像 [this] (foundation.zurb.com/sites/docs/magellan.html)。看看滚动时右侧的选项如何突出显示？

标签： html zurb-foundation magellan

【解决方案1】：

 $(document).foundation();

li {
  list-style: none outside;
}

   
 
#div2_wrapper,
#div3_wrapper,
#div4_wrapper {
 height:100%;
 border:1px solid blue;
}

.sticky ul li {
  padding: 5px;
}

.active {
  border: 1px solid red;
  padding: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css">


<section id="div1_wrapper" data-magellan-target="div1_wrapper">
  <div class="leftHeaders" data-sticky-container>
    <div class="sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-anchor="content">
      <ul data-magellan>
        <li><a href="#div4_wrapper">4th page</a></li>
        <li><a href="#div3_wrapper">3rd page</a></li>
        <li><a href="#div2_wrapper">2nd page</a></li>
        <li><a href="#div1_wrapper">1st page</a></li>
      </ul>
    </div>
  </div>
</section>
<section id="div2_wrapper" data-magellan-target="div2_wrapper">

</section>
<section id="div3_wrapper" data-magellan-target="div3_wrapper">
  
</section>
<section id="div4_wrapper" data-magellan-target="div4_wrapper">
  
</section>

【讨论】：