API tools faq
paste
Advertisement
MrBotox

Scrolling Menu Dots for navigation.

MrBotox
Nov 21st, 2014
171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Dots Test</title>
  5.     <style>
  6.     /* Menu Dots made by Ryan Thorn (@MrBotox_) */
  7.     @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800);
  8.  
  9.     body {
  10.         background-color: rgb(20,20,30);
  11.         color: rgb(200,200,200);
  12.         font-family: 'Open Sans', sans-serif;
  13.     }
  14.  
  15.     /* Sections between here required for Menu Scroll Dots */
  16.     ul {
  17.         list-style: none;
  18.         position:fixed;
  19.         right: 50px;
  20.         top: 20px;
  21.     }
  22.  
  23.     li {
  24.         list-style: none;
  25.         margin-bottom:10px;
  26.     }
  27.  
  28.     .dot {
  29.         width:18px;
  30.         height:18px;
  31.         border-radius:15px;
  32.         border:3px solid rgb(200,200,200);
  33.         padding:3px;
  34.     }
  35.  
  36.     .fill {
  37.         width:100%;
  38.         height:100%;
  39.         border-radius: calc(100% / 2);
  40.         background-color: rgb(200,200,200);
  41.         visibility: hidden;
  42.         content: " ";
  43.     }
  44.  
  45.     .fill.active {
  46.         visibility: visible;
  47.     }
  48.  
  49.     .anch {
  50.         width:100%;
  51.         font-weight:700;
  52.         font-size:20pt;
  53.         text-transform:uppercase;
  54.     }
  55.     /* Section End */
  56.     .content {
  57.         width:90%;
  58.         font-size:15pt;
  59.         height:500px;
  60.         font-weight:300;
  61.         margin-left:50px;
  62.     }
  63.  
  64.     ::selection {
  65.         background: #FC9C00; /* WebKit/Blink Browsers */
  66.     }
  67.  
  68.     ::-moz-selection {
  69.         background: #FC9C00; /* Gecko Browsers */
  70.     }
  71.     </style>
  72. </head>
  73. <body>
  74. <!-- Sections between here are required for Menu Scroll Dots -->
  75. <ul class="anchor-list">
  76.     <li><div id="anch1" class="dot"><a href="#anch1"><div data-scroll="slide1" class="fill active"></div></a></div></li>
  77.     <li><div id="anch2" class="dot"><a href="#anch2"><div data-scroll="slide2" class="fill"></div></a></div></li>
  78.     <li><div id="anch3" class="dot"><a href="#anch3"><div data-scroll="slide3" class="fill"></div></a></div></li>
  79.     <li><div id="anch4" class="dot"><a href="#anch4"><div data-scroll="slide4" class="fill"></div></a></div></li>
  80.     <li><div id="anch5" class="dot"><a href="#anch5"><div data-scroll="slide5" class="fill"></div></a></div></li>
  81. </ul>
  82. <!-- End of Section -->
  83.  
  84. <!-- To define anchor points create divs with the data-anchor = to the data-scroll in the above list for each item -->
  85. <div id="anch1" data-anchor="slide1" class="anch">Anchor One</div>
  86. <div class="content">
  87.     <p>
  88.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus diam, accumsan aliquam scelerisque et, posuere maximus lorem. Sed consequat, magna eu elementum interdum, dui ipsum tempor felis, quis vulputate nisl lacus ac ante. Nunc vel velit nec tortor congue maximus nec non nibh. Donec a nulla iaculis, interdum lacus nec, vulputate purus. Ut augue justo, blandit a sagittis at, vestibulum sed sapien. Morbi at vulputate nulla. Nunc laoreet magna ligula, a interdum mauris facilisis nec. Donec ornare quam justo, vulputate aliquam sapien facilisis non.
  89.     </p>
  90.     <p>
  91.         Vestibulum condimentum, leo vitae auctor vehicula, elit ante egestas eros, in tempus mi sapien quis lacus. Nulla suscipit, libero et euismod blandit, elit justo porttitor nibh, at auctor orci ipsum ut mauris. Quisque non nunc id sem cursus pharetra congue eget ipsum. Ut quis tortor in est laoreet malesuada quis vitae massa. In porta elit est, dignissim commodo ex hendrerit sit amet. Etiam sed nisl vitae lacus tristique tincidunt vel id libero. Quisque ornare volutpat odio quis rhoncus. Nam cursus lacus a sagittis tincidunt. Etiam vehicula ipsum quis dolor vehicula faucibus. Praesent sapien elit, auctor non justo ut, interdum malesuada lorem. Integer non quam et mauris tristique ultrices. Vestibulum vehicula aliquam risus, at laoreet lorem sollicitudin sed. Etiam semper luctus neque vulputate efficitur. Pellentesque laoreet neque eget purus ultricies gravida.
  92.     </p>
  93.     <p>
  94.         Sed sit amet nulla nec enim mollis consectetur. Integer fringilla felis at varius fringilla. Donec eu magna at quam pulvinar ullamcorper. Morbi ullamcorper ligula sit amet ante volutpat accumsan. In vehicula nisi a neque tempor posuere. Nam lobortis ut augue ut vehicula. Mauris sapien nisi, molestie at dolor vel, ultricies efficitur ligula. Vivamus tristique velit at malesuada accumsan. Nunc sem massa, consequat non ipsum id, consequat rutrum sapien.
  95.     </p>
  96. </div>
  97.  
  98. <div id="anch2" data-anchor="slide2" class="anch">Anchor Two</div>
  99. <div class="content">
  100.     <p>
  101.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus diam, accumsan aliquam scelerisque et, posuere maximus lorem. Sed consequat, magna eu elementum interdum, dui ipsum tempor felis, quis vulputate nisl lacus ac ante. Nunc vel velit nec tortor congue maximus nec non nibh. Donec a nulla iaculis, interdum lacus nec, vulputate purus. Ut augue justo, blandit a sagittis at, vestibulum sed sapien. Morbi at vulputate nulla. Nunc laoreet magna ligula, a interdum mauris facilisis nec. Donec ornare quam justo, vulputate aliquam sapien facilisis non.
  102.     </p>
  103.     <p>
  104.         Vestibulum condimentum, leo vitae auctor vehicula, elit ante egestas eros, in tempus mi sapien quis lacus. Nulla suscipit, libero et euismod blandit, elit justo porttitor nibh, at auctor orci ipsum ut mauris. Quisque non nunc id sem cursus pharetra congue eget ipsum. Ut quis tortor in est laoreet malesuada quis vitae massa. In porta elit est, dignissim commodo ex hendrerit sit amet. Etiam sed nisl vitae lacus tristique tincidunt vel id libero. Quisque ornare volutpat odio quis rhoncus. Nam cursus lacus a sagittis tincidunt. Etiam vehicula ipsum quis dolor vehicula faucibus. Praesent sapien elit, auctor non justo ut, interdum malesuada lorem. Integer non quam et mauris tristique ultrices. Vestibulum vehicula aliquam risus, at laoreet lorem sollicitudin sed. Etiam semper luctus neque vulputate efficitur. Pellentesque laoreet neque eget purus ultricies gravida.
  105.     </p>
  106.     <p>
  107.         Sed sit amet nulla nec enim mollis consectetur. Integer fringilla felis at varius fringilla. Donec eu magna at quam pulvinar ullamcorper. Morbi ullamcorper ligula sit amet ante volutpat accumsan. In vehicula nisi a neque tempor posuere. Nam lobortis ut augue ut vehicula. Mauris sapien nisi, molestie at dolor vel, ultricies efficitur ligula. Vivamus tristique velit at malesuada accumsan. Nunc sem massa, consequat non ipsum id, consequat rutrum sapien.
  108.     </p>
  109. </div>
  110.  
  111. <div id="anch3" data-anchor="slide3" class="anch">Anchor Three</div>
  112. <div class="content">
  113.     <p>
  114.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus diam, accumsan aliquam scelerisque et, posuere maximus lorem. Sed consequat, magna eu elementum interdum, dui ipsum tempor felis, quis vulputate nisl lacus ac ante. Nunc vel velit nec tortor congue maximus nec non nibh. Donec a nulla iaculis, interdum lacus nec, vulputate purus. Ut augue justo, blandit a sagittis at, vestibulum sed sapien. Morbi at vulputate nulla. Nunc laoreet magna ligula, a interdum mauris facilisis nec. Donec ornare quam justo, vulputate aliquam sapien facilisis non.
  115.     </p>
  116.     <p>
  117.         Vestibulum condimentum, leo vitae auctor vehicula, elit ante egestas eros, in tempus mi sapien quis lacus. Nulla suscipit, libero et euismod blandit, elit justo porttitor nibh, at auctor orci ipsum ut mauris. Quisque non nunc id sem cursus pharetra congue eget ipsum. Ut quis tortor in est laoreet malesuada quis vitae massa. In porta elit est, dignissim commodo ex hendrerit sit amet. Etiam sed nisl vitae lacus tristique tincidunt vel id libero. Quisque ornare volutpat odio quis rhoncus. Nam cursus lacus a sagittis tincidunt. Etiam vehicula ipsum quis dolor vehicula faucibus. Praesent sapien elit, auctor non justo ut, interdum malesuada lorem. Integer non quam et mauris tristique ultrices. Vestibulum vehicula aliquam risus, at laoreet lorem sollicitudin sed. Etiam semper luctus neque vulputate efficitur. Pellentesque laoreet neque eget purus ultricies gravida.
  118.     </p>
  119.     <p>
  120.         Sed sit amet nulla nec enim mollis consectetur. Integer fringilla felis at varius fringilla. Donec eu magna at quam pulvinar ullamcorper. Morbi ullamcorper ligula sit amet ante volutpat accumsan. In vehicula nisi a neque tempor posuere. Nam lobortis ut augue ut vehicula. Mauris sapien nisi, molestie at dolor vel, ultricies efficitur ligula. Vivamus tristique velit at malesuada accumsan. Nunc sem massa, consequat non ipsum id, consequat rutrum sapien.
  121.     </p>
  122. </div>
  123.  
  124. <div id="anch4" data-anchor="slide4" class="anch">Anchor Four</div>
  125. <div class="content">
  126.     <p>
  127.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus diam, accumsan aliquam scelerisque et, posuere maximus lorem. Sed consequat, magna eu elementum interdum, dui ipsum tempor felis, quis vulputate nisl lacus ac ante. Nunc vel velit nec tortor congue maximus nec non nibh. Donec a nulla iaculis, interdum lacus nec, vulputate purus. Ut augue justo, blandit a sagittis at, vestibulum sed sapien. Morbi at vulputate nulla. Nunc laoreet magna ligula, a interdum mauris facilisis nec. Donec ornare quam justo, vulputate aliquam sapien facilisis non.
  128.     </p>
  129.     <p>
  130.         Vestibulum condimentum, leo vitae auctor vehicula, elit ante egestas eros, in tempus mi sapien quis lacus. Nulla suscipit, libero et euismod blandit, elit justo porttitor nibh, at auctor orci ipsum ut mauris. Quisque non nunc id sem cursus pharetra congue eget ipsum. Ut quis tortor in est laoreet malesuada quis vitae massa. In porta elit est, dignissim commodo ex hendrerit sit amet. Etiam sed nisl vitae lacus tristique tincidunt vel id libero. Quisque ornare volutpat odio quis rhoncus. Nam cursus lacus a sagittis tincidunt. Etiam vehicula ipsum quis dolor vehicula faucibus. Praesent sapien elit, auctor non justo ut, interdum malesuada lorem. Integer non quam et mauris tristique ultrices. Vestibulum vehicula aliquam risus, at laoreet lorem sollicitudin sed. Etiam semper luctus neque vulputate efficitur. Pellentesque laoreet neque eget purus ultricies gravida.
  131.     </p>
  132.     <p>
  133.         Sed sit amet nulla nec enim mollis consectetur. Integer fringilla felis at varius fringilla. Donec eu magna at quam pulvinar ullamcorper. Morbi ullamcorper ligula sit amet ante volutpat accumsan. In vehicula nisi a neque tempor posuere. Nam lobortis ut augue ut vehicula. Mauris sapien nisi, molestie at dolor vel, ultricies efficitur ligula. Vivamus tristique velit at malesuada accumsan. Nunc sem massa, consequat non ipsum id, consequat rutrum sapien.
  134.     </p>
  135. </div>
  136.  
  137. <div id="anch5" data-anchor="slide5" class="anch">Anchor Five</div>
  138. <div class="content">
  139.     <p>
  140.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus diam, accumsan aliquam scelerisque et, posuere maximus lorem. Sed consequat, magna eu elementum interdum, dui ipsum tempor felis, quis vulputate nisl lacus ac ante. Nunc vel velit nec tortor congue maximus nec non nibh. Donec a nulla iaculis, interdum lacus nec, vulputate purus. Ut augue justo, blandit a sagittis at, vestibulum sed sapien. Morbi at vulputate nulla. Nunc laoreet magna ligula, a interdum mauris facilisis nec. Donec ornare quam justo, vulputate aliquam sapien facilisis non.
  141.     </p>
  142.     <p>
  143.         Vestibulum condimentum, leo vitae auctor vehicula, elit ante egestas eros, in tempus mi sapien quis lacus. Nulla suscipit, libero et euismod blandit, elit justo porttitor nibh, at auctor orci ipsum ut mauris. Quisque non nunc id sem cursus pharetra congue eget ipsum. Ut quis tortor in est laoreet malesuada quis vitae massa. In porta elit est, dignissim commodo ex hendrerit sit amet. Etiam sed nisl vitae lacus tristique tincidunt vel id libero. Quisque ornare volutpat odio quis rhoncus. Nam cursus lacus a sagittis tincidunt. Etiam vehicula ipsum quis dolor vehicula faucibus. Praesent sapien elit, auctor non justo ut, interdum malesuada lorem. Integer non quam et mauris tristique ultrices. Vestibulum vehicula aliquam risus, at laoreet lorem sollicitudin sed. Etiam semper luctus neque vulputate efficitur. Pellentesque laoreet neque eget purus ultricies gravida.
  144.     </p>
  145.     <p>
  146.         Sed sit amet nulla nec enim mollis consectetur. Integer fringilla felis at varius fringilla. Donec eu magna at quam pulvinar ullamcorper. Morbi ullamcorper ligula sit amet ante volutpat accumsan. In vehicula nisi a neque tempor posuere. Nam lobortis ut augue ut vehicula. Mauris sapien nisi, molestie at dolor vel, ultricies efficitur ligula. Vivamus tristique velit at malesuada accumsan. Nunc sem massa, consequat non ipsum id, consequat rutrum sapien.
  147.     </p>
  148. </div>
  149.  
  150. <!-- Requires jQuery.js -->
  151. <script src="jquery.js"></script>
  152. <script>
  153. // Menu Scroll Dots by Ryan Thorn (@MrBotox_)
  154. $(document).ready(function(){
  155.     window.addEventListener( 'scroll', function() {
  156.     var scrollPos = $(this).scrollTop();
  157.     var windowHeight = $(window).height();
  158.     var docHeight = $(document).height();
  159.  
  160.     $("div[data-anchor^=slide]").each(function(i) {
  161.  
  162.         var anchor = $(this).attr('data-anchor');
  163.         if ($(this).position().top <= scrollPos + 20 ) {
  164.            $('.fill').removeClass('active');
  165.            $('div[data-scroll="' + anchor + '"]').addClass("active");
  166.        }
  167.  
  168.        if(scrollPos + windowHeight == docHeight) {
  169.            if (!$('.anchor-list li:last-child a div').hasClass('active')) {
  170.                var navActiveCurrent = $('.active').data('scroll');
  171.                $('div[data-scroll="' + navActiveCurrent +'"]').removeClass('active');
  172.                $('.anchor-list li:last-child a div').addClass('active');
  173.            }
  174.        }
  175.  
  176.        });
  177.    });
  178. });
  179. </script>
  180. </body>
  181. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!