A simple sticky menu with auto updating classes based on elements position.
A Pen by Nicola Zanon on CodePen.
#ToDo:
- Better handling of Scroll event
Forked from anonymous/Simple-Sticky-Menu-.markdown
Last active
December 28, 2015 00:49
-
-
Save zanonnicola/7415637 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrapper"> | |
| <nav id="nav"> | |
| <div class="menu"> | |
| <a class="one" href="#one">One</a> | |
| <a class="two" href="#two">Two</a> | |
| <a class="three" href="#three">Three</a> | |
| <a class="four" href="#four">Four</a> | |
| </div> | |
| </nav> | |
| <section> | |
| <h1 id="one" class="inview">Section 1</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| </section> | |
| <section> | |
| <h1 id="two" class="inview">Section 2</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| </section> | |
| <section> | |
| <h1 id="three" class="inview">Section 3</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| </section> | |
| <section> | |
| <h1 id="four" class="inview">Section 4</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p> | |
| </section> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var el = $("#one"); | |
| var menu = $("#nav"); | |
| var pos = el.offset().top; | |
| $(window).on("scroll", function() { | |
| var scrollPos = $(window).scrollTop(); | |
| if (scrollPos > (pos - 50)) { //Adjust menu opening | |
| menu.addClass('stick'); | |
| } | |
| else { | |
| menu.removeClass('stick'); | |
| }; | |
| // Setting the right menu classes | |
| $('.inview').each(function(){ | |
| var itemOffset = Math.abs($(this).offset().top); | |
| if (itemOffset > 0 && itemOffset < scrollPos) { | |
| var menuElm = $(this).attr('id'); | |
| console.log(menuElm); | |
| $(".menu > a").removeClass("active"); | |
| $("." + menuElm).addClass("active"); | |
| } | |
| }); | |
| }); | |
| /* Performs a smooth page scroll to an anchor on the same page. | |
| http://css-tricks.com/snippets/jquery/smooth-scrolling/ */ | |
| $('a[href*=#]:not([href=#])').click(function() { | |
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
| || location.hostname == this.hostname) { | |
| var target = $(this.hash); | |
| target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | |
| if (target.length) { | |
| $('html,body').animate({ | |
| scrollTop: target.offset().top | |
| }, 1000); | |
| return false; | |
| } | |
| } | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass"; | |
| a { | |
| text-decoration:none; | |
| color: #4c4c4c; | |
| font-size:20px; | |
| } | |
| p { | |
| font-size:18px; | |
| margin:0.5em 0; | |
| } | |
| h1 { | |
| font-size:2.5em; | |
| padding-top:15px; | |
| margin-bottom:1em; | |
| } | |
| .wrapper { | |
| max-width:1200px; | |
| margin: 1em auto; | |
| } | |
| section { | |
| margin-top:2em; | |
| border-top:1px solid #ccc; | |
| width:60%; | |
| } | |
| nav { | |
| background-color:#fff; | |
| padding:1em 0; | |
| a { | |
| margin-right:1em; | |
| &:last-child { | |
| margin-right:0; | |
| } | |
| &:hover { | |
| text-decoration:underline; | |
| } | |
| } | |
| } | |
| .stick { | |
| position:fixed; | |
| top:0; | |
| left:0; | |
| opacity:0.8; | |
| width:100%; | |
| .menu { | |
| max-width:1200px; | |
| margin:0 auto; | |
| .active { | |
| text-decoration:underline; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment