A simple sticky menu with auto updating classes based on elements position.
A Pen by Nicola Zanon on CodePen.
Created
November 11, 2013 16:05
-
-
Save anonymous/7415622 to your computer and use it in GitHub Desktop.
A Pen by Nicola Zanon.
This file contains 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 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'); | |
| }; | |
| $('.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"); | |
| } | |
| }); | |
| }); | |
| // Setting the right menu classes | |
| /*$("h1.inview").on("inview", function (event, visible) { | |
| if (visible) { | |
| var elId = "#" + $(this).attr("id"); | |
| $(".menu > a").each(function() { | |
| var href = $(this).attr("href"); | |
| console.log(href); | |
| if(elId == href) { | |
| $(".menu > a").removeClass("active"); | |
| $(this).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 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