Scrollspy内容不滚动滚动表
我在我的网站上使用materializecss滚动组件,滚动链接正在工作。但唯一让我感到困扰的是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了解更多详情。
嗨Saurav,很好的答案!对不起,我无法接受你的回答。我把这个home> profile> etc页面作为登陆页面结构。如果我使用你的解决方案,内容'.tabletable'也会出现在主页部分,并且我想严格限制配置文件部分中的'.table-of-contents'元素。但这是一个非常好的解决方法,你会得到我的赞赏。 –
@sunstation没问题!只是想让你知道解决方法。 –
你可以使用这个管理上的点击内容的滚动位置:
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>
对不起,在您提交任何信息之前,请阅读其他答案。我已经回答了我自己的问题。而你的回答似乎并不合理,因为我已经在我的代码簿上进行了滚动启动。如果通过其他方式意味着我有任何初始化错字,您可以在这里看到scrollspy文档http://materializecss.com/scrollspy.html –
请检查codepen它将修复html – RonyLoud
中的滚动问题,您必须使用'scrollspy'代替'scrollSpy'。请参阅此[文档](https://github.com/sxalexander/jquery-scrollspy/blob/master/examples/fixednav.html)以获取更多信息 – RonyLoud
这似乎不是一个理想的解决方案。看看我的答案,你会知道它的区别。 –
请阅读我的评论。如果您在着陆页网站中使用它,您将会知道其中的不同之处。谢谢。 –