基础粘麦哲伦不起作用
Foundation sticky magellan not working
我正在尝试创建一个小导航,让我在点击时转到某些 div。它会这样做,但目前它只是快速下降到 div。相反,我想要一个平滑的过渡,就像它在 documentation.
中所说的那样
此外,当我向下滚动到某些 div 时,我希望突出显示必要的导航栏。但是当我检查它们上的元素时,当我向下滚动页面时,它们不会突出显示。它肯定会选择 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>
$(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>
我正在尝试创建一个小导航,让我在点击时转到某些 div。它会这样做,但目前它只是快速下降到 div。相反,我想要一个平滑的过渡,就像它在 documentation.
中所说的那样此外,当我向下滚动到某些 div 时,我希望突出显示必要的导航栏。但是当我检查它们上的元素时,当我向下滚动页面时,它们不会突出显示。它肯定会选择 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>
$(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>