0

I believe the answer lies in jQuery, and I've tried several solutions on this.

The root of my problem is that I am modifying this website and I'm not the one who designed it. It's made in wordpress, but the theme is heavily customized. It's a one page site with several sections, and a menu at the top with anchor links for those sections. I've been able to change the highlight class on click, but I need it to also change when the corresponding section is visible on screen. I know this should be simple, but the mere complicatedness of this site is throwing me off.

Here is the HTML for the menu: (some of these classes point to a large part of the style.css file. I'm not sure if it's worth mentioning, so let me know)

<div class="ddsmoothmenu"><ul id="menu-home-2" class="menu">
<li class="menu-item"><a class="link" href="#home">Home</a></li>
<li class="menu-item"><a class="link" href="#our-story">Our Story</a></li>
<li class="menu-item"><a class="link" href="#services">Services</a></li>
<li class="menu-item"><a class="link" href="#tools">Tools of the Trade</a></li>
<li class="menu-item"><a class="link" href="#faqs">FAQs</a></li>
<li id="menu-item-310" class="menu-item"><a href="/category/blog/">Blog</a></li>
<li class="menu-item"><a class="link" href="#contact">Contact</a></li>
</ul></div>

The styling I have in the same file for the active CSS changes:

<style>
a, a:visited { color:black }
a.link.active { color:blue; }
</style>

And this is the script I have for the click events that change the color:

<script>
$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});
</script>

I know a lot of this is really poorly done...so excuse me. I think if I could detect the currently visible section ID, and activate the CSS class of the menu item associated, it would be payday. Help!

PinnacleAffinity
  • 1
  • 1
  • By highlight, you mean you want the currently clicked menu item to be colored blue? Or are you looking for adding a background color? – Hassaan May 05 '15 at 18:23
  • I've been coloring it blue. A background could be just as useful. Main point is being able to change the CSS of a menu item depending on the current anchor visible. – PinnacleAffinity May 05 '15 at 18:27
  • If you want to access the encapsulating li of the link clicked, you can access it either with $(this).parent() or $(this).closest('li') or $(this).closest('.menu-item'). – Taplar May 05 '15 at 18:30
  • Are you trying to highlight the menu as the user scrolls through the page and passes an anchor tag listed in the menu? – Hassaan May 05 '15 at 18:32
  • Yes @Hassaan, exactly – PinnacleAffinity May 05 '15 at 18:40

1 Answers1

0

I think this jsFiddle project should help you answer your question. The link is from this previous SO answer.

You have to bind a scroll event to the window or some container.

Quick example from previous SO answer:

// Cache selectors
var topMenu = $(".ddsmoothmenu"),
topMenuHeight = topMenu.outerHeight(),

// All list items
menuItems = topMenu.find("a"),

// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
  var item = $($(this).attr("href"));
  if (item.length) { return item; }
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop() + topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });

   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
});​
Community
  • 1
  • 1
Hassaan
  • 932
  • 8
  • 16