Javascript 使用滚动事件和添加类的动画标题

我正在尝试设置标题的动画，以便在用户滚动时更改高度和字体大小。当scroll>某个数字时，我使用一个函数将一个类添加到标题中，但在测试时标题保持不变。我将在下面包括我的html、css和JS

HTML:

JS:

---

到目前为止，在我滚动并且没有动画发生后，标题保持完全相同。我不确定是什么原因导致它不能触发。非常感谢您的帮助。

您正在添加类

。滚动

，而不是

滚动

，这意味着选择器将是

。滚动

将

addClass（“.scroll”）

更改为

addClass（“.scroll”）

并将

removeClass（“.scroll”）

更改为

removeClass（“.scroll”）

，然后它就会工作

请尝试下面的代码片段

$（窗口）。滚动（函数（）{
如果（$（this.scrollTop（）>1）{
$（'header'）.addClass（“滚动”）；
}
否则{
$（'header'）.removeClass（“滚动”）；
}
});
标题{
背景色：#E9DCCD；
字体系列：“Oswald”；
字体大小：160%；
高度：100px；
宽度：100%；
边框底部：实心；
边框底色：#339933；
边框底宽：5px；
位置：固定；
线高：50px；
z指数：1000；
溢出：隐藏；
过渡：所有0.8秒缓解；
}
.卷轴{
高度：50px；
字号：80%；
}









Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个自由的孕期宣言。他是一位杰出的艺术家，他是一位杰出的艺术家。在便利处进行前相位测量。Maecenas sed augue sem。临床医生，缺乏治疗的有效性，缺乏治疗的有效性，缺乏治疗的有效性，缺乏治疗的必要性。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Fusce eros nisl，拍卖人sed tellus at，pulvinar pharetra nibh。莫比·马克西莫斯、罗勒姆·维塔·马莱苏阿达·森佩尔、努拉·维利特·帕特·奥奇、非accumsan eros libero id arcu。
福斯·埃莱芬德·洛博蒂斯·托托，在自由之路，坐在阿梅特。非利奥商品库。Donec在调味品tellus。在前奥纳尔·比本杜姆·埃吉特欧盟智囊团举行的选举。在tincidunt前庭lacus eget mattis中。这是一个很好的例子。在酒后驾车时，请注意。这是一个非常简单的方法。
这是一个很好的例子。前庭弓形，前庭舌形，威尼斯直径。阿利奎姆·苏西比特·韦尔尼姆·马莱苏亚达。这是一种高效的发酵剂。努克·康莫多·索皮恩和弗林利亚·利奥·希特·艾米特拍卖行。在洛雷姆酒后驾车。佩伦特式的酒席，威尼斯人酒后驾车。佩伦特·埃吉特·利奥·乌纳。整数iaculis semper magna。Nam vitae nisi调味品。自由精英，权杖，各种各样的欧盟选举。
请使用此代码

$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
}); 

试试这个

$(document).ready(function(){
$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
}); 
});

已经尝试过了，但没有成功，还尝试将header改为.header etcTry以使用此代码@EthanBristow
$（document）.ready（函数（）{$（窗口）.scroll（函数（）{if（$（this）.scrollTop（）>1）{$（'header'）.addClass（'scroll'）；}else{$（'header'）.removeClass（'scroll'）；}）@EthanBristow您使用的是外部js文件还是内部代码？此代码有效吗？如果没有，请尝试使用此jQuery文件<代码>
我不确定是什么原因导致它无法工作，但我尝试了该链接，但不幸的是仍然没有更改尝试将jQuery代码移动到js文件的顶部您尝试过这样引用jQuery库吗？code.jquery.com/jquery.min.js“>
/*jslint browser: true*/ 
/*global $, jQuery, alert*/

$(document).ready(function(){ 
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) {  
            $('#header').addClass("scroll");
        } else {
            $('#header').removeClass("scroll");
        }
    });
});

$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
}); 

$(document).ready(function(){
$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  
      $('header').addClass('scroll');
   } else {
      $('header').removeClass('scroll');
   }
}); 
});