gpt4 book ai didi

javascript - Scrollspy 目录不跟随滚动

转载 作者:行者123 更新时间:2023-11-28 04:52:38 29 4
gpt4 key购买 nike

我在我的网站上使用 materializecss scrollspy 组件,scrollspy 链接有效。但唯一困扰我的是 scrollspy 的目录没有跟随滚动位置。

<div class="row">
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li><a href="#about">About Us</a></li>
<li><a href="#information">Information Technology</a></li>
<li><a href="#trade">Trade Marketing</a></li>
</ul>
</div>
<div class="col s12 m9 l10">
<div id="about" class="section scrollspy">
<h5>About Us</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p></p>
</div>
<div class="divider"></div>
<div id="information" class="section scrollspy">
<h5>Information Technology</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p> </p>
</div>
<div class="divider"></div>
<div id="trade" class="section scrollspy">
<h5>Trade Marketing</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p></p>
</div>
</div>
</div>

这是jquery

$('.scrollspy').scrollSpy();

或者请检查这个codepen了解更多详情。

最佳答案

使用position: fixed.table-of-contents,看看更新后的 Codepen .

供您引用:

.table-of-contents {
position: fixed;
}

关于javascript - Scrollspy 目录不跟随滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40615333/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com