在main.js 中
jQuery(document).ready(function(){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
在index.html 中
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/main.js"></script>
<head>
在style.css 中
.secondary{
background-color:#34495e;
}
这是一个代码，用于在页面向下滚动到时，将导航栏的类"nav"更改为类"secondary">
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
上面的代码在中不能正常工作
jQuery(document).ready(function(){});
但是，
jQuery(document).ready(function(){
"use strict"
alert("hello world");
});
工作良好，其他一些功能也工作良好
但有些功能不起作用。
有人能帮我找到这个问题的解决方案吗
您的代码是正确的。用console.log检查top的值，以确保触发滚动事件。否则，您将发现有关代码其他部分的错误。
例如，这是有效的，也经过了轻微的优化：
$(document).ready(function() {
"use strict";
var $win = $(window)
var $nav = $("nav");
$win.scroll(function() {
var top = $win.scrollTop();
console.log(top);
if (top >= 60) {
$nav.addClass("secondary");
} else if ($nav.hasClass("secondary")) {
$nav.removeClass("secondary");
}
});
});
演示：https://codepen.io/taseenb/pen/QWbxRvP
您可以在浏览器的检查工具上检查错误所在。如果按"F12"，将显示"开发人员工具"面板。然后单击此面板上的"控制台"，检查发生了哪些错误。
我想您需要使用"jQuery"关键字来选择元素。或者请尝试以下代码。
jQuery(document).ready(function($){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
如果你能分享你的网页网址，我可以帮助你检查错误并找到解决方案。
你可以试试这个，它对我有效
放入源脚本
<script th:src="@{/richtext/jquery.richtext.min.js}"></script>
<script th:src="@{/richtext/jquery.richtext.js}"></script>
然后脚本文本：
<script type="text/javascript">
(function($) {
$('#shortDescription').richText();
$('#fullDescription').richText();
})(jQuery);
</script>