How can I highlight position in nav bar for single-page website?

Question

I used this tutorial to create the "scroll easing" effect on my single page website: http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

So I basically just used jQuery scrollTo.js and localScroll and executed it on the page with:

$(document).ready(function() {
$('.fixed_nav').localScroll({duration:700});
});

However, now I want to take it a bit further and make it display the current position on my nav bar with a highlight.

Is there a way to accomplish this with the current tutorial I am using or do I need to try something else?

This is my current HTML and CSS for the navigation:

HTML:

  <div class="fixed_nav_wrapper">
    <nav class="fixed_nav">
            <ul>
                <li><a title="go home" href="#home_link">home</a></li>
                <li><a title="about me" href="#profile_link">me</a></li>
                <li><a title="services" href="#services_link">services</a></li>
                <li><a title="samples" href="#samples_link">work</a></li>
                <li><a title="contact me" href="#contact_link">contact</a></li>
            </ul>
    </nav>
</div>

CSS:

.fixed_nav_wrapper {
  width:710px; 
  margin:0 auto; 
}

.fixed_nav { 
  width:100%; 
  height:50px; 
  margin: -5px auto 0 auto; 
  background-color:transparent;
  z-index:1000;
}

.fixed_nav ul { 
  display:block; 
  margin:0 auto; 
  padding:15px 5px 5px 5px;
  list-style:none;  
}

.fixed_nav ul li { 
  display:inline;
  margin:0 auto; 
  padding:0;
}

.fixed_nav ul li a { 
  display:block; 
  float:left; 
  margin:0 25px; 
  padding:0 5px 0 4px; 
  font-size: 2rem;
  color:rgba(235,235,235,1);
  font-family: Inversionz, sans-serif;
  letter-spacing:-0.25rem;
  text-decoration:none;
 }

.fixed_nav ul li a:hover { 
  color:rgba(255,255,255,1) !important;
 -webkit-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px  13px 0px rgba(255, 255, 255, 1);
 -moz-box-shadow:    0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1);
box-shadow:         0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1); 
}

There is actually more since I have a "sticky" nav effect when the user scrolls down to a certain point, but this is the basics.

seanlevan · Accepted Answer · 2015-02-08T03:34:57.740

1

The jQuery scrollTop() function can be called to return the vertical scrollbar position of an element.

Ex: alert(window.scrollTop()); or alert(document.scrollTop());, for your circumstance.

It suits your needs.

Edit: As demanded:

<script>

body.addEventListener("scroll", scrollfunc());

function scrollfunc(){

if(scrollTop() > 100){ 

document.getElementByClassName("menuitem")[0].style.borderBottom="2px solid #2cafe4";

}

if(scrollTop() > 200){ 

document.getElementByClassName("menuitem")[1].style.borderBottom="2px solid #2cafe4";

document.getElementByClassName("menuitem")[0].style.borderBottom="0px";

}

if(scrollTop() > 300){ 

document.getElementByClassName("menuitem")[2].style.borderBottom="2px solid #2cafe4";

document.getElementByClassName("menuitem")[0].style.borderBottom="0px";

document.getElementByClassName("menuitem")[1].style.borderBottom="0px";

}

}

</script>

Sample markup of the HTML:

<a class="menuitem">1</a> <a class="menuitem">2</a> <a class="menuitem">3</a>

This example adds borders to the menu item the page is on through a function triggered onscroll, but you can adjust it to do anything you like and to match your specific needs. Just a quick demo.

edited Feb 08 '15 at 03:34

answered Feb 08 '15 at 03:01

seanlevan

1,367
3
15
33

Thanks. The only thing is that I am a total beginner at Javascript. I know that I need to add a script to "call an ID or class when position is X position", but I don't know how to write it out. If you could hint me just a little more, that would be great! – Lark Feb 08 '15 at 03:05
Could you clarify a bit more about what exactly you need? :) @lark I'd be happy to help. – seanlevan Feb 08 '15 at 03:08
Sure! So I want my site to be able to do this: http://jsfiddle.net/mekwall/up4nu/ or this http://callmenick.com/lab-demos/7-single-page-smooth-scroll/ . This is exactly what I want except I have a sticky nav after I scroll. My website looks precisely like this one in terms of navigation: http://www.davidhardydesign.com/ . See how it sticks to top after the user scrolls down past the intro and then the links are highlighted upon click/scroll? For some reason I can't get it to work with my page lol. I must be doing something wrong! Thanks a bunch! – Lark Feb 08 '15 at 03:17
Oh sure! I've done that same type of thing in web-design many times before. So you would want the header to be sticky after a point of scrolling, do this: `` and then make the function `functionhere()` as follows: (replace `number` with something else you have experimented with) `` – seanlevan Feb 08 '15 at 03:20
Thanks! I actually got past the "sticky" part already. The only part that is left is to highlight the position. That's all I need. I used this method to get it sticky: http://stackoverflow.com/questions/14496240/how-can-i-stick-the-div-after-scrolling-down-a-little . – Lark Feb 08 '15 at 03:22
Highlight the position where? In one of the links of the menubar? @Lark – seanlevan Feb 08 '15 at 03:25
Yep, exactly as shown in the examples I showed you. I used the first answer in the link above to get it to stick. – Lark Feb 08 '15 at 03:27
Just letting you know that I used your script as a starting point and created something that works for a fixed width design. I used $window.scroll instead of an eventListener because it matches my other code for the sticky nav. I also used .addClass and .removeClass instead of doing the css inline. Any idea how I could get your script to work for a responsive design since the window height changes and elements shift positions when the window is made smaller? What happens now is that if the window is resized, the nav items no longer highlight at the correct positions. Thanks! – Lark Feb 08 '15 at 05:49
nevermind, I got it to work. I just changed the numbers around to make the intervals greater. Thanks! – Lark Feb 08 '15 at 06:55

score 0 · Answer 2 · answered Feb 08 '15 at 03:26

0

Bootstrap has just this feature in it's "scrollspy" feature. If you want to roll your own you could download their source and see how they implement it:

http://getbootstrap.com/javascript/#scrollspy

answered Feb 08 '15 at 03:26

fishingaddict

139
2

How can I highlight position in nav bar for single-page website?

2 Answers2