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了解更多详情。

来源

2016-11-15 sun station

原谅我的愚蠢的问题，我只需要对表的内容使用pushpin组件。

这里是jQuery的例子：

$('.table-of-contents').pushpin({ 
    top: 900, 
    bottom: 2000, 
    offset: 0 
});

下面是更新codepen

来源

2016-11-15 16:53:45

这似乎不是一个理想的解决方案。看看我的答案，你会知道它的区别。 –

请阅读我的评论。如果您在着陆页网站中使用它，您将会知道其中的不同之处。谢谢。 –

使用position: fixed到.table-of-contents，看看更新的Codepen。

供您参考：

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

来源

2016-11-15 16:52:43

嗨Saurav，很好的答案！对不起，我无法接受你的回答。我把这个home> profile> etc页面作为登陆页面结构。如果我使用你的解决方案，内容'.tabletable'也会出现在主页部分，并且我想严格限制配置文件部分中的'.table-of-contents'元素。但这是一个非常好的解决方法，你会得到我的赞赏。 –

@sunstation没问题！只是想让你知道解决方法。 –

-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

来源

2016-11-15 17:14:09 RonyLoud

对不起，在您提交任何信息之前，请阅读其他答案。我已经回答了我自己的问题。而你的回答似乎并不合理，因为我已经在我的代码簿上进行了滚动启动。如果通过其他方式意味着我有任何初始化错字，您可以在这里看到scrollspy文档http://materializecss.com/scrollspy.html –

请检查codepen它将修复html – RonyLoud

中的滚动问题，您必须使用'scrollspy'代替'scrollSpy'。请参阅此[文档]（https://github.com/sxalexander/jquery-scrollspy/blob/master/examples/fixednav.html）以获取更多信息 – RonyLoud

Scrollspy内容不滚动滚动表

回答

相关问题