ShapeYourPath
(current)
Run Code
Live Code Editor-Materialize Scrollspy
Source Code
<!DOCTYPE html> <html lang="en"> <head> <title>Materialize Scrollspy</title> <meta name="viewport" content="width = device-width, initial-scale = 1" /> <meta name="robots" content="noindex,nofollow"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <style type="text/css"> .dropdown-content { min-width: 250px; } </style> </head> <body> <div class="container"> <h1>Materialize Scrollspy</h1> <div class="row"> <div class="col s12 m9 l10"> <div id="webdesign" class="section scrollspy"> <div class="card-panel teal"> <h2>Web Design</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptatum dolore perferendis ipsum excepturi delectus, vitae aut expedita, amet, ullam modi, recusandae non. Libero recusandae illo doloremque perspiciatis fugiat, perferendis animi accusantium nostrum vel quas nobis fuga, veritatis harum corporis itaque laboriosam, ipsa facere quisquam impedit hic voluptatum illum neque quos delectus! Maiores, ipsam incidunt quod praesentium necessitatibus. Modi voluptatum magni ratione facere obcaecati maxime expedita atque laudantium debitis soluta, iusto, libero dolorum facilis inventore numquam velit recusandae rerum eveniet. Vitae facere officiis, corrupti ipsa, sequi, deserunt, voluptate nemo dolorum esse at soluta earum accusamus amet natus a. Commodi, modi? Dignissimos aperiam, quia ullam ipsum, amet ducimus! Dolorem modi corrupti porro odit corporis, itaque autem dolore. Suscipit vero officiis asperiores magnam molestiae veniam praesentium modi delectus cum eos accusamus architecto perferendis ducimus sint commodi, a corrupti eum distinctio dolorem enim maxime iste nesciunt. Non, nesciunt aperiam, repellendus voluptas harum laborum. </p> </div> </div> <div id="graphicsdesign" class="section scrollspy"> <div class="card-panel green"> <h2>Graphics Design</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptatum dolore perferendis ipsum excepturi delectus, vitae aut expedita, amet, ullam modi, recusandae non. Libero recusandae illo doloremque perspiciatis fugiat, perferendis animi accusantium nostrum vel quas nobis fuga, veritatis harum corporis itaque laboriosam, ipsa facere quisquam impedit hic voluptatum illum neque quos delectus! Maiores, ipsam incidunt quod praesentium necessitatibus. Modi voluptatum magni ratione facere obcaecati maxime expedita atque laudantium debitis soluta, iusto, libero dolorum facilis inventore numquam velit recusandae rerum eveniet. Vitae facere officiis, corrupti ipsa, sequi, deserunt, voluptate nemo dolorum esse at soluta earum accusamus amet natus a. Commodi, modi? Dignissimos aperiam, quia ullam ipsum, amet ducimus! Dolorem modi corrupti porro odit corporis, itaque autem dolore. Suscipit vero officiis asperiores magnam molestiae veniam praesentium modi delectus cum eos accusamus architecto perferendis ducimus sint commodi, a corrupti eum distinctio dolorem enim maxime iste nesciunt. Non, nesciunt aperiam, repellendus voluptas harum laborum. </p> </div> </div> <div id="appdesign" class="section scrollspy"> <div class="card-panel orange"> <h2>App Design</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptatum dolore perferendis ipsum excepturi delectus, vitae aut expedita, amet, ullam modi, recusandae non. Libero recusandae illo doloremque perspiciatis fugiat, perferendis animi accusantium nostrum vel quas nobis fuga, veritatis harum corporis itaque laboriosam, ipsa facere quisquam impedit hic voluptatum illum neque quos delectus! Maiores, ipsam incidunt quod praesentium necessitatibus. Modi voluptatum magni ratione facere obcaecati maxime expedita atque laudantium debitis soluta, iusto, libero dolorum facilis inventore numquam velit recusandae rerum eveniet. Vitae facere officiis, corrupti ipsa, sequi, deserunt, voluptate nemo dolorum esse at soluta earum accusamus amet natus a. Commodi, modi? Dignissimos aperiam, quia ullam ipsum, amet ducimus! Dolorem modi corrupti porro odit corporis, itaque autem dolore. Suscipit vero officiis asperiores magnam molestiae veniam praesentium modi delectus cum eos accusamus architecto perferendis ducimus sint commodi, a corrupti eum distinctio dolorem enim maxime iste nesciunt. Non, nesciunt aperiam, repellendus voluptas harum laborum. </p> </div> </div> </div> <div class="col hide-on-small-only m3 l2"> <ul class="section table-of-contents"> <li><a href="#webdesign">Web Design</a></li> <li><a href="#graphicsdesign">Graphics Design</a></li> <li><a href="#appdesign">App Design</a></li> </ul> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(".scrollspy").scrollSpy(); }); </script> </body> </html>
Output :
Running
MATERIALIZE-TUTORIAL
MATERIALIZE-CSS-SCROLLSPY OTHER EXAMPLES
Materialize Scrollspy Example