我在我的网站上使用materializecss scrollspy组件，scrollspy链接正在运行。但唯一困扰我的是scrolllspy的内容表没有跟随滚动位置。
<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了解详情。
答案 0 :(得分：1)
答案 1 :(得分：0)
请原谅我的愚蠢问题， 我只需要在内容表上使用pushpin个组件。
这是jquery示例：
$('.table-of-contents').pushpin({
top: 900,
bottom: 2000,
offset: 0
});
这是更新后的codepen
答案 2 :(得分：-1)
您可以使用它来管理点击内容的滚动位置：
JS：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { });
$('.scrollspy').scrollspy();
</script>.
HTML：
<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">
<h2>About Us</h2>
<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>
</div>
<div class=""></div>
<div id="information" class="section scrollspy">
<h2>Information Technology</h2>
<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>
</div>
<div class=""></div>
<div id="trade" class="section scrollspy">
<h2>Trade Marketing</h2>
<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>
</div>
</div>
</div>
参考codepen