Question

我正在为我的新网站滚动创建一个较小的标题，所以我正慢慢地将新类应用于标题中的每个元素，并在滚动时通过jQuery添加/删除它们。它运行良好，但脚本没有改变其中一个类，我不确定为什么。脚本如下所示：

<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>

未添加的课程是＆＃34; ICON_BG_2＆＃34;。我尝试更改CSS和脚本上的名称，没有雪茄。以下是与之相关的类：

.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;
}

我还通过在ICON_BG_2下添加更多元素的功能进行了测试，但是它们没有用，所以它不是某种最大/过载协议。

JSFiddle可以在这里找到：http://jsfiddle.net/qTTHL/2/

Answer 1

您的代码正在寻找元素<Icon_BG_2>...</Icon_BG_2>，显然不是您想要的！

您忘记了.来表示班级名称。

Answer 2

您在jquery方法

中的类名前面缺少一个点

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

应该是这个

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

Answer 3

另外，在你的jsfiddle例子中，

html有这个类 - Icon_BG_2 javascript在哪里 - ICON_BG_2

CSS区分大小写。

希望这会解决它

Answer 4

正如其他人所指出的，缺失的点是当前的问题。

但是，您可以简化代码。您想要操作的大多数元素已经有一个共同的类nav_hover。只需在每个徽标中添加一个公共类（例如nav_logo），您的javascript即可：

$(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;
    }
});

此外，“HOME”的类声明不正确 - 多个类进入单个类属性，用空格分隔。

工作小提琴：http://jsfiddle.net/magnafides/qTTHL/8/

JQuery无法识别滚动上的单个类更改

4 个答案: