7

I apologize for the long post. I wanted to include everything that might be helpful.

I have a single page website that consists of several divs stacked vertically. I'm using a floating nav bar and softscroll.js to make anchor links move to the divs when clicked.

I'm a front end designer, but through this website and hours of trial/error and googling I've been able to get all elements working. (Auto resize div height when window resize, highlight clicked anchor link, scroll etc.)

I've got it set up so that clicking an anchor link changes it's class to "active". That works beautifully. But I want to trigger the same thing if the user manually scrolls to the div as well.

I've looked at the code used in this post as I've seen it a couple of times. But it replaces some of the codes I've already got working and still doesn't highlight.

Here is the code I'm using for the active anchor:

// JS for highlight selected button
$(function() {
    $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

And I'm using this one to resize the divs based on window size. Not sure if it is relevant, but here:

// JS for Div Height Auto Resize 
$(document).ready(function(){
  resizeDiv();
});

window.onresize = function(event) {
  resizeDiv();
}

function resizeDiv() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.layoutblock').css({'height': vph + 'px'});
}

This is the menu HTML:

<div id="navigation">
<ul>
<li><a href="#composition" ><img src="images/icons/compicon.png" alt="composition" width="32" height="36" border="0" align="middle" />Composition</a></li>
<li><a href="#creative"><img src="images/icons/designicon.png" alt="Large Format" width="36" height="33" border="0" align="middle" /> Creative</a></li>
[...]
</ul>
</div>

...and the menu CSS:

  #navigation {
    background-color: #F60;
    position: fixed;
    height: 100%;
    width: 60px;
     -moz-transition:width .5s;
    -webkit-transition:width .5s;
    -o-transition:width .5s;
    transition:width .5s;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding-top: 30px;
    margin-left: 0px;
}

#navigation:hover {
    margin-left: 0px;
    width: 190px;
}

#navigation li {
    list-style: none;
    margin-left: -40px;

}

#navigation img {
    padding-left: 5px;
    padding-right: 20px;
}
#navigation li a {
    font-family: "Proxima N W01 Smbd", Arial, Helvetica;
    font-size: 14px;
    display: block;
    color: white;
    font-weight:bold;
    text-decoration: none;
    text-transform:uppercase;
    line-height:26px;
    padding-left:5px;
    padding-right: 5px;
    padding-top: 10px;
    height: 50px;
    white-space: nowrap;
}

a.active{
    background-color: #333;
}

Finally, here is the URL for the test page: [redacted for security now that site is launched]

Community
  • 1
  • 1
SNSAD
  • 261
  • 1
  • 2
  • 7

2 Answers2

9

Well, I found my answer here: Change Active Menu Item on Page Scroll? which lead to a fiddle that worked like a charm.

I ended up using code to watch for the anchor tags and change the menu based on those. It even included soft scrolling and on-click highlights, so I was able to get rid of the other snippets I was using.

Also important to note: I had a heck of a time getting it to work on my site even though it worked in the fiddle. Turns out I needed to put the snippet at the end of the body so that everything would be loaded before it registered the anchors. Just a tip if anyone else experiences the same issue.

Community
  • 1
  • 1
SNSAD
  • 261
  • 1
  • 2
  • 7
0

You can use Jquery's on method and listen for the scroll event.

Daveee
  • 49
  • 4
  • Well that's good news. Any idea how for this situation? Since the divs vertically resize, will the scroll event help in telling which of the divs is in the viewport? I've done some searching about it and it seems like it can tell when the mouse is scrolling p/down but not where? – SNSAD Jan 01 '14 at 03:26
  • ```$('.divYouWantToListenTo').on('scroll', function() {do stuff;})``` – Daveee Jan 01 '14 at 03:30
  • Thanks! But looking at the documentation I can find and the example here: http://api.jquery.com/scroll/ I can't find any examples of how to implement your {do stuff} when a specific div is in the viewport. The listen, as far as I can tell, literally listens only to when a div is scrolling. I'm looking for a "If div x is in the viewport, make anchor X red. If div y is in the viewport, make anchor y red." Am I misunderstanding? – SNSAD Jan 01 '14 at 05:43
  • This post: http://stackoverflow.com/questions/10555998/change-css-element-with-jquery-when-scroll-reaches-an-anchor-point seems to indicate scrolltop might be used, but I'm not looking to change css, but to add a class. Also, it needs to work in tandem with the other onClick script I'm currently using. – SNSAD Jan 01 '14 at 05:45