diff --git a/README.md b/README.md index bfdf1ee..0990fe6 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ [Simple scrollspy](https://kimyvgy.github.io/simple-scrollspy) is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 1.4Kb. Examples: -- [Demo 1](https://kimyvgy.github.io/simple-scrollspy/demo) -- [Demo 2](https://kimyvgy.github.io/simple-scrollspy/demo/2.html) +- [Header With Navigation Bar](https://kimyvgy.github.io/simple-scrollspy/demo) +- [Table Of Contents](https://kimyvgy.github.io/simple-scrollspy/demo/toc.html) ## Install diff --git a/demo/2.html b/demo/2.html deleted file mode 100644 index e8cfe9c..0000000 --- a/demo/2.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - Simple Scrollspy - - - -
- - -
Hero
-
Section 1
-
Section 2
-
Section 3
-
Section 4
-
Section 5
- - -
- - - - - diff --git a/demo/demo.css b/demo/demo.css deleted file mode 100644 index 03f9f02..0000000 --- a/demo/demo.css +++ /dev/null @@ -1,112 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - font-family: Roboto, sans-serif; - font-size: 100%; - color: #333333; -} - -.app { - min-height: 100vh; - width: 100%; -} - -.navbar { - position: fixed; - top: 0; - left: 0; - width: 100%; - min-height: 60px; - color: #333333; - background: #ffffff; - overflow: hidden; - z-index: 1000; - -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); -} - -.navbar-brand a { - text-decoration: none; - color: #0ca2f3; -} - -.navbar .container { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 1200px; - margin-left: auto; - margin-right: auto; - padding-left: 15px; - padding-right: 15px; -} - -.menu-item { - display: inline-block; - font-size: 1.125rem; - text-decoration: none; - padding: 1rem; - color: inherit; - border-radius: 5px; -} - -.menu-item:hover { - background: rgba(2, 2, 2, 0.1); -} - -.menu-item.active { - background: #03a8fa; - color: #ffffff; -} - -.section { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100vh; - font-size: 3rem; - font-weight: bold; - color: #ffffff; -} - -.section:nth-child(2) { - background: linear-gradient(#0097e6, #00a8ff); -} - -.section:nth-child(3) { - background: #ffffff; - color: #333232; -} - -.section:nth-child(4) { - background: #9783fc; -} - -.section:nth-child(5) { - background: #e6b530; -} - -.section:nth-child(6) { - background: #9333ea; -} - -.section:nth-child(7) { - background: #ffffff; - color: #333232; -} - -.footer { - padding-top: 2rem; - padding-bottom: 3rem; - text-align: center; - background: #353b48; - color: #ffffff; -} -.footer a { - color: #ffffff; - text-decoration: none; - display: inline-block; -} diff --git a/demo/index.html b/demo/index.html index 77bd4c7..fd2ba13 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,69 +1,498 @@ - + - - - - - Simple Scrollspy - - - -
- + -
Hero
-
Section 1
-
Section 2
-
Section 3
-
Section 4
+
+
+
+

+ Let's find more that brings us together. +

+

+ Flowbite helps you connect with friends, family and communities of + people who share your interests. Connecting with your friends and + family as well as discovering new ones is easy with features like + Groups, Watch and Marketplace. +

+
+ + Get started + + + + + + View more + +
+
+
+
- -
+
+
+ dashboard image + +
+

+ Let's create more tools and ideas that brings us together. +

+

+ Flowbite helps you connect with friends and communities of people + who share your interests. Connecting with your friends and family as + well as discovering new ones is easy with features like Groups. +

+ + Get started + + + + +
+
+
- - - +
+
+
+

+ Start your free trial today +

+

+ Try Flowbite Platform for 30 days. No credit card required. +

+ Free trial for 30 days +
+
+
+ + + + + + + + diff --git a/demo/toc.html b/demo/toc.html new file mode 100644 index 0000000..eda9a68 --- /dev/null +++ b/demo/toc.html @@ -0,0 +1,461 @@ + + + + + + + + + + Simple Scrollspy - TOC Example + + + +
+ +
+ +
+
+ + New + Lorem ipsum dolor sit amet consectetur. + + + + +

+ Lorem ipsum dolor sit amet. +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto quis + error repudiandae quaerat eaque accusamus rerum rem esse sit dolores. +

+
+ + Learn more + + + + + + + + + Watch video + +
+
+
+ +
+
+
+

+ Section 1: Lorem ipsum dolor sit amet consectetur. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto + quas distinctio porro aut, id quae quisquam ut esse in vel minima + repudiandae labore, sunt laboriosam, quis tenetur ex impedit? + Inventore in, ipsa dolorum libero repellendus, quos sequi rerum fuga + earum, aspernatur quis distinctio. Voluptate rerum harum corporis + voluptatem porro eaque repellendus nostrum? Sequi dolorum a, + laudantium laboriosam nostrum dignissimos ex! Obcaecati, quam. +

+ +

+ At dolores debitis nihil sint quisquam modi, beatae neque laudantium + perspiciatis officiis accusantium cupiditate adipisci explicabo quae + excepturi, hic cum recusandae eveniet fugiat obcaecati. Modi, + tempore commodi? Beatae veniam aliquam ipsum quis nulla odit rerum + itaque quae dicta? Autem, deserunt aut id quas est, eaque veniam + voluptatibus odit debitis nemo doloremque. Omnis facere cum soluta + est pariatur obcaecati labore sunt voluptate optio suscipit tenetur, + culpa nesciunt earum perferendis modi dolore provident fugiat + delectus nihil eveniet cumque ipsam qui? +

+
+ +
+

+ Section 2: Lorem, ipsum dolor. +

+ +

+ Iusto, magni qui hic molestiae nulla unde, maiores dolore eveniet + assumenda distinctio non recusandae dicta laboriosam porro et + aperiam corporis odio quo. Maiores, exercitationem consequuntur, + porro fuga omnis impedit sint sit tempora quia voluptatum molestias + itaque. Dignissimos facere nostrum voluptatum odio non esse expedita + rerum veniam voluptatem nulla officia, beatae dolor similique + deserunt, accusantium quam debitis quos excepturi et magnam + reiciendis placeat modi aliquid! +

+ +

+ Corrupti magni cupiditate quibusdam possimus reiciendis architecto + nobis minus numquam, aut suscipit mollitia impedit optio nostrum + adipisci a rerum cumque! Odio dicta provident et delectus quidem? + Cupiditate nisi voluptatem est ex alias at adipisci nemo dicta fuga + reiciendis a ullam saepe dolorum porro doloremque culpa officiis, + cumque non incidunt? Molestiae, quam. Debitis, in quos. +

+
+ +
+

+ Section 3: Lorem ipsum dolor sit amet consectetur. +

+ +

+ Aut odio animi provident et sapiente beatae sed rerum porro. Libero + repudiandae quia eos nam voluptates mollitia quis ex tempora, + aliquid magnam consequatur recusandae saepe dignissimos et sit vel + ad rerum incidunt beatae magni reiciendis aliquam fugit praesentium. + Ducimus magni magnam veritatis? +

+
+ +
+

+ Section 4: Lorem ipsum dolor sit amet consectetur. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto + quas distinctio porro aut, id quae quisquam ut esse in vel minima + repudiandae labore, sunt laboriosam, quis tenetur ex impedit? + Inventore in, ipsa dolorum libero repellendus, quos sequi rerum fuga + earum, aspernatur quis distinctio. Voluptate rerum harum corporis + voluptatem porro eaque repellendus nostrum? Sequi dolorum a, + laudantium laboriosam nostrum dignissimos ex! Obcaecati, quam. +

+ +

+ At dolores debitis nihil sint quisquam modi, beatae neque laudantium + perspiciatis officiis accusantium cupiditate adipisci explicabo quae + excepturi, hic cum recusandae eveniet fugiat obcaecati. Modi, + tempore commodi? Beatae veniam aliquam ipsum quis nulla odit rerum + itaque quae dicta? Autem, deserunt aut id quas est, eaque veniam + voluptatibus odit debitis nemo doloremque. Omnis facere cum soluta + est pariatur obcaecati labore sunt voluptate optio suscipit tenetur, + culpa nesciunt earum perferendis modi dolore provident fugiat + delectus nihil eveniet cumque ipsam qui? +

+
+ +
+

+ Section 5: Lorem, ipsum dolor. +

+ +

+ Iusto, magni qui hic molestiae nulla unde, maiores dolore eveniet + assumenda distinctio non recusandae dicta laboriosam porro et + aperiam corporis odio quo. Maiores, exercitationem consequuntur, + porro fuga omnis impedit sint sit tempora quia voluptatum molestias + itaque. Dignissimos facere nostrum voluptatum odio non esse expedita + rerum veniam voluptatem nulla officia, beatae dolor similique + deserunt, accusantium quam debitis quos excepturi et magnam + reiciendis placeat modi aliquid! +

+ +

+ Corrupti magni cupiditate quibusdam possimus reiciendis architecto + nobis minus numquam, aut suscipit mollitia impedit optio nostrum + adipisci a rerum cumque! Odio dicta provident et delectus quidem? + Cupiditate nisi voluptatem est ex alias at adipisci nemo dicta fuga + reiciendis a ullam saepe dolorum porro doloremque culpa officiis, + cumque non incidunt? Molestiae, quam. Debitis, in quos. +

+
+ +
+

+ Section 6: Lorem ipsum dolor sit amet consectetur. +

+ +

+ Aut odio animi provident et sapiente beatae sed rerum porro. Libero + repudiandae quia eos nam voluptates mollitia quis ex tempora, + aliquid magnam consequatur recusandae saepe dignissimos et sit vel + ad rerum incidunt beatae magni reiciendis aliquam fugit praesentium. + Ducimus magni magnam veritatis? +

+
+
+ +
+
+ On this page +
+ + +
+
+ +
+
+
+

+ Start your free trial today +

+

+ Try Flowbite Platform for 30 days. No credit card required. +

+ Free trial for 30 days +
+
+
+ + + + + + + + +