Javascript 我的jquery和css粘滞条，不'；行不通

下面是我用来使粘滞条调整到滚动条的脚本

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>59）{
$（'#bar）.addClass（'bar-fixed'）；
}
如果（$（窗口）.scrollTop（）<61）{
$（'#bar'）。removeClass（'bar-fixed'）；
}
});
});
$（文档）.ready（函数（）{
$（document.foundation（）；
})

这是为页面和粘滞条在粘滞之前和粘滞之后生成的css代码（请注意，页面使用flex编码，以便两个侧栏调整到中间的侧栏）
@输入“指南针/css3”；
iframe.youtube-player{
对齐：居中；}
.包装纸{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
显示：
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
.wrapper>*{
填充：0px；
弹性：1100%；
}
.酒吧固定{
排名：0；
z指数：9999；
位置：固定；
宽度：100%；
}
#酒吧{
宽度：100%；
高度：50px；
背景色：#5959；
盒影：0px 2px 2px#8888888；
}
托普赛克先生{
宽度：100%；
高度：60px；
背景色：白色；
盒影：0px 2px 2px#88888；
文本对齐：左对齐；
显示：内联块；
}
.页脚{
高度：150像素；
背景色：#333333；
盒影：嵌入0 20px 20px-20px黑色；
}
梅因先生{
文本对齐：左对齐；
背景色：白色；
最小高度：1024px；
边缘顶部：55px；
}
.LB{
背景色：#e6；文本对齐：左；最大宽度：200px；最小宽度：200px；
页边顶部：1px；
盒影：插入0 20px 20px-20px#8888888；
}
.RB{
背景色：#e6；文本对齐：左；最大宽度：200px；最小宽度：200px；
页边距顶部：1px；框阴影：插入0 20px 20px-20px#88888；
}
@介质和全部（最小宽度：600px）{
.aside{flex:1 auto；}
}
@介质和全部（最小宽度：800px）{
.main{flex:10 0px；}
.LB{顺序：1；}
.main{顺序：2；}
.RB{顺序：3；}
.footer{顺序：4；}
}
身体{
填充：0px；边距：0px；
}

这是我将脚本放在末尾的html代码

您可以使用

if ($(window).scrollTop() > 59) {
    $('#bar').addClass('bar-fixed');
}else{
    $('#bar').removeClass('bar-fixed');
}

您检查的代码的问题，如果

$（window）.scrollTop（）>59

，然后检查

$（window）.scrollTop（）<61

，这样当您达到59到61之间时，您的代码将直接添加类和删除，我认为在这些数字之间滚动是不可能的

注意：确保包含jquery

要包含jquery，请在关闭body标记和运行任何脚本或调用外部js文件之前放置此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

注意：这是包含jquery的多种方法之一。您可以使用 代码是肯定的，但要了解更多信息，您应该搜索如何 安装jquery

---

告诉我这是否有效。如果无效，请告诉我可以做些什么来改进它

window.addEventListener（'load'，function（）{
var bar=document.getElementById（'bar'）；
addEventListener（'scroll'，function（）{
var scrollTop=document.body.scrollTop；
如果（滚动顶部<59）{
bar.className=''；
}
如果（滚动顶部>61）{
bar.className='bar fixed'；
}
});
})；

@import“compass/css3”；
iframe.youtube-player{
对齐：居中；
}
.包装纸{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
显示：-webkit柔性流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
.wrapper>*{
填充：0px；
弹性：1100%；
}
.酒吧固定{
排名：0；
z指数：9999；
位置：固定；
宽度：100%；
}
#酒吧{
宽度：100%；
高度：50px；
背景色：红色；
盒影：0px 2px 2px#8888888；
}
托普赛克先生{
宽度：100%；
高度：60px；
背景色：白色；
盒影：0px 2px 2px#88888；
文本对齐：左对齐；
显示：内联块；
}
.页脚{
高度：150像素；
背景色：#333333；
盒影：嵌入0 20px 20px-20px黑色；
}
梅因先生{
文本对齐：左对齐；
背景色：白色；
最小高度：1024px；
边缘顶部：55px；
}
.LB{
背景色：#e6；
文本对齐：左对齐；
最大宽度：200px；
最小宽度：200px；
页边顶部：1px；
盒影：插入0 20px 20px-20px#8888888；
}
.RB{
背景色：#e6；
文本对齐：左对齐；
最大宽度：200px；
最小宽度：200px；
页边顶部：1px；
盒影：插入0 20px 20px-20px#8888888；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:10 0px；
}
.LB{
顺序：1；
}
梅因先生{
顺序：2；
}
.RB{
顺序：3；
}
.页脚{
顺序：4；
}
}
身体{
填充：0px；
边际：0px；
}
.酒吧固定{
位置：固定；

嗯，没错，这很符合逻辑，谢谢你，但它仍然不起作用，though@MrRobot你是否包括jquery？？？。然后重新排列你的css代码..将.bar固定在css文件中的#bar之后包括该部分中的脚本刚刚给了我一个空白页，将其包含在正文中，在实际脚本之前，没有任何区别，并且将-修正后，酒吧也做了几乎所有的事情disappear@MrRobot在$（'#bar'）.addClass中（您忘记了'so use use$（'#bar'）.addClass）（@MrRobot你也可以检查这一点，这对你的情况很清楚，我的控制台说你有语法错误！检查你的控制台是否有错误，并找出问题的那一部分。我正在写一个答案…它非常有效是的，但我的jquery和你的jquery有什么区别？它只是一种不同的编码方式吗？还是它也会影响性能？我的代码是JJQuery实际上只是JavaScript的一个变种。事实上，JQuery只是包含一个JavaScript函数库。你可能想看看JQuery是如何工作的或类似的东西。我通常