CODEWITHSUNDEEP
jquerycss
user3517583
user3517583

Reputation: 45

JQuery Not Recognizing A Single Class Change On Scroll

I'm working on creating a smaller header on scroll for my new site, so I am slowly applying new classes to each element in the header, and having them added/removed by jQuery on scroll. It is working well, but the script is not changing one of the classes, and I'm not exactly sure why. The script looks like this:

<script>
$(function(){
 var shrinkHeader = 200;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
       $('.Header').addClass('small');
       $('.Logo').addClass('small');
       $('.HOME').addClass('small');
       $('.CREATORS').addClass('small');
       $('.VERTICALS').addClass('small');
       $('.XENOVA_').addClass('small');
       $('.ABOUT').addClass('small');
       $('.CONTACT').addClass('small');
       $('.LOG_IN').addClass('small');
       $('div.ICON_BG1').addClass('small');
       $('ul#menu li ul.sub-menu').addClass('small');
       $('ICON_BG_2').addClass('small');
    }
    else {
        $('.Header').removeClass('small');
        $('.Logo').removeClass('small');
        $('.HOME').removeClass('small');
        $('.CREATORS').removeClass('small');
        $('.VERTICALS').removeClass('small');
        $('.XENOVA_').removeClass('small');
        $('.ABOUT').removeClass('small');
        $('.CONTACT').removeClass('small');
        $('.LOG_IN').removeClass('small');
        $('div.ICON_BG1').removeClass('small');
        $('ul#menu li ul.sub-menu').removeClass('small');
        $('ICON_BG_2').removeClass('small');
    }
  });
function getCurrentScroll() {
    return window.pageYOffset;
    }
});
</script>

The class that isn't being added is "ICON_BG_2". I tried changing the name on CSS and the script, no cigar. Here are the classes associated with it:

.Icon_BG_2 {
  background: url("images/IconBG2.png") no-repeat;
  position: absolute;
  margin-left: 960px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
 -webkit-transition: background-image .5s;
}
.Icon_BG_2.small {
  background: url("images/IconBG2.png") no-repeat;
  position: absolute;
  margin-left: 960px;
  top: 26px;
  width: 35px;
  height: 35px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}
.Icon_BG_2:hover {
  background: url("images/IconBGHover2.png") no-repeat;
  position: absolute;
  margin-left:960x;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}

I also tested by adding functions for more elements under ICON_BG_2 and they worked, so it isn't some sort of maximum/overload deal.

JSFiddle can be found here: http://jsfiddle.net/qTTHL/2/

Upvotes: 0

Views: 70

Answers (4)

ach
ach

Reputation: 6234

The missing dot is the immediate problem, as pointed out by others.

However, you can simplify your code quite a bit. Most of the elements you want to operate on already have a common class, nav_hover. Just add a common class (nav_logo, for example) to each of the logos, and your javascript becomes:

$(function(){
 var shrinkHeader = 200;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
          $('.nav_logo').addClass('small');
          $('.nav_hover').addClass('small');
        }
        else {
          $('.nav_logo').removeClass('small');
          $('.nav_hover').removeClass('small');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset;
    }
});

Also, your class declarations for "HOME" were incorrect -- multiple classes go inside of a single class attribute, separated by a space.

Working fiddle: http://jsfiddle.net/magnafides/qTTHL/8/

Upvotes: 0

Ashima
Ashima

Reputation: 4824

Also, in your jsfiddle example,

html has this class -- Icon_BG_2 where as javascript has this -- ICON_BG_2

CSS is case-sensitive.

Hope this will fix it

Upvotes: 0

Ashima
Ashima

Reputation: 4824

You are missing a dot in front of your class name inside jquery method

$('ICON_BG_2').addClass('small');

should be this 

$('.ICON_BG_2').addClass('small');  // Notice, the dot!

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Your code is looking for an element <Icon_BG_2>...</Icon_BG_2>, obviously not what you intended!

You forgot the . to indicate a class name.

Upvotes: 1

Related Questions