Adding a css class on scroll via javascript

Question

I have a navigation with an empty div in each anchor tag that I am styling on hover.

html

<li><a href="#events">SPECIAL EVENTS <div></div></a></li>

css

a:hover div, a:active div{
    color: $black;
    height: 1px;
    background-color: $black;
    width: 100%;
    margin-top: 5px;
}

I also have a active class that I am attaching on click with some js. This is currently working correctly.

var currentDiv;

function addSelected(){

if(currentDiv !== undefined){
    $(currentDiv).removeClass("active");    
}

currentDiv = $(this).find('div');
$(currentDiv).addClass("active");
}

$(".menu a").click(addSelected);

What I am trying to do is attached that same active class based on the user scroll. I get most of it working, but I can't seem to figure how how to attached the class to the div, and not the anchor itself. Here is the js I'm working with.

js

    // Cache selectors
var lastId,
topMenu = $("#desktop-nav"),
topMenuHeight = topMenu.outerHeight()+15,
// 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 : "";

if (lastId !== id) {
    lastId = id;
    // Set/remove active class
    menuItems

    //.parent().removeClass("active")
    //.end().filter("[href='#"+id+"']").parent().addClass("active");

    .removeClass("active");
    end().filter($("[href='#"+id+"']")).find('div').addClass("active");

    console.log(id);
}                   
});

I think the part that I am trying to change is this

"[href='#"+id+"']").parent()

but everything I try is either not working or giving me errors.

EDIT

Here is the fiddle that I am trying to modify.

fiddle link

it's attaching the class to the parent of the anchor tag instead of the div tag that is inside of the anchor — icekomo
– icekomo, Commented Jul 1, 2017 at 2:48
@dan, I updated the js to include all the code that I am using, Does that help? — icekomo
– icekomo, Commented Jul 1, 2017 at 3:09

Ayatullah Rahmani · Accepted Answer · 2017-07-01 05:24:41Z

1

Use children() instead of parent() or find()

Example:

 if (lastId !== id) {
       lastId = id;
       // add/remove active class on div
       menuItems
         .children().removeClass("active")
         .end().filter("[href='#"+id+"']").children().addClass("active");
   }

answered Jul 1, 2017 at 5:24

Ayatullah Rahmani

9325 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samuel stewart · Accepted Answer · 2017-07-01 02:52:30Z

1

Try changing it to use find() like in your click handler:

"[href='#"+id+"']").find('div')

answered Jul 1, 2017 at 2:52

samuel stewart

112 bronze badges

1 Comment

icekomo Over a year ago

This seems to find the first one, but still adds the class to the parent, even if I update the code to this .end().filter("[href='#"+id+"']").find('div').addClass("active");

user5862470 · Accepted Answer · 2017-07-01 03:30:57Z

0

I assume you've tried...

"[href='#"+id+"']").parent().find('div')

and/or...

"[href='#"+id+"'].div"

...if so, are you able to add a class or id to the div and target it that way?

answered Jul 1, 2017 at 3:30

user5862470

1 Comment

icekomo Over a year ago

Yes I can add a class to the div, but I'm still not sure how to target the class with the above code.

Collectives™ on Stack Overflow

Adding a css class on scroll via javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related