如何使滚动jQuery侦听器适应CSS媒体查询？（Javascript/jQuery/Bootstrap）
我对这一切都不熟悉；所以我在过去的一天里一直在努力让jQuery正常工作。我有一个导航栏，它可以根据滚动位置改变背景色/颜色，这是通过jQuery完成的。我让它在桌面宽度1350px上有效工作，但试图同时处理媒体查询和jQuery侦听器似乎是不可能的。我已经应用了我发现的所有东西，并且尝试了两次，但都没有用 HTML HTML是一个基本的引导导航栏，导航栏只是由于jQuery滚动位置的改变而改变如何使滚动jQuery侦听器适应CSS媒体查询？（Javascript/jQuery/Bootstrap）,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我对这一切都不熟悉；所以我在过去的一天里一直在努力让jQuery正常工作。我有一个导航栏，它可以根据滚动位置改变背景色/颜色，这是通过jQuery完成的。我让它在桌面宽度1350px上有效工作，但试图同时处理媒体查询和jQuery侦听器似乎是不可能的。我已经应用了我发现的所有东西，并且尝试了两次，但都没有用 HTML HTML是一个基本的引导导航栏，导航栏只是由于jQuery滚动位置的改变而改变 </head> <body> <nav class="navba
</head>
<body>
<nav class="navbar sticky-top navbar-expand-sm">
<a class="navbar-title" href="#aboutUs-box">counterCarbon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i><span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav align-items-end">
<li class="nav-item">
<a class="nav-link active" href="#navLink1">Emissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#navLink2">Comparisons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#navLink3">Partners</a>
</li>
</ul>
</div>
</nav>
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
{if(($(window).width() >= 1350 && scroll_pos > 50)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1350 && scroll_pos > 690)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos > 1270)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1350 && scroll_pos > 1290)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos < 50)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
if(($(window).width() >= 1020 && scroll_pos > 45)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1020 && scroll_pos > 650)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos > 1220)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1020 && scroll_pos > 1245)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos < 45)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
{if(($(window).width() >= 750 && scroll_pos > 40)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 750 && scroll_pos > 620)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos > 1200)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 750 && scroll_pos > 1220)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos < 40)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
});
});
```
我很难理解你想要什么样的间隔，所以我提出了一些意见，以帮助你实现你想要的，如果它不是这样的话。 此外，我还结合了ifs结构，以避免无用地重新计算表达式 $document.readyfunction{ var scroll_pos=0； $document.scroll函数{ scroll_pos=$this.scrollTop； 变量宽度=$window.width； 如果宽度>=1350{ //以下所有内容均表示宽度>=1350 //1:这会覆盖2，因为 如果滚动位置50{//RANGE[50+∝] $nav.removeClassvisible.addClasshidden； $nav a.removeClassvisible.addClasshidden； $nav span.removeClassvisible.addClasshidden； } 如果滚动位置>690{//[689，∝] $nav.removeClasshidden.addClassvisible； $nav a.removeClasshidden.addClassvisible； $nav span.removeClasshidden.addClassvisible； $nav.css'background-color'，'fafafafa'； $nav a.css'color'，'404040'； $'nav span'.css'color'，'404040'； } /** * * 2 *这永远不会被执行：请参见1 * *你写了： 否则{ $nav.css'background-color'，'transparent'； $nav a.css‘颜色’、‘fafafa’； $nav span.css'color'，'fafafafa'； } **/ 如果滚动位置>1270{//[1270+∝] $nav a.css‘颜色’、‘33adff’； $nav span.css'color'，'33adff'； } /** * *请注意，如果SCROLL_POS>1970，上面的所有内容都将执行，因此您将有一个组合 *这是因为1970>690>50，所以上面的一切都是真的 *如果您要进行闭合间隔，请尝试在开始处放置滚动位置的最大值，如果需要，请使用ELSE */ } 如果宽度>=1020{ 如果滚动位置>=45{ $nav.removeClassvisible.addClasshidden； $nav a.removeClassvisible.addClasshidden； $nav span.removeClassvisible.addClasshidden； } 如果滚动位置>650{ $nav.removeClasshidden.addClassvisible； $nav a.removeClasshidden.addClassvisible； $nav span.removeClasshidden.addClassvisible； $nav.css'background-color'，'fafafafa'； $nav a.css'color'，'404040'； $'nav span'.css'color'，'404040'； }else{//范围[0620] $nav.css'background-color'，'transparent'； $nav a.css‘颜色’、‘fafafa’； $nav span.css'color'，'fafafafa'； } 如果滚动位置>1220{ $nav a.css‘颜色’、‘33adff’； $nav span.css'color'，'33adff'； } 如果滚动位置>1245{ $nav.css'background-color'，'fafafafa'； } 如果滚动位置<45{ $nav.css'background-color'，'transparent'； $nav a.css‘颜色’、‘fafafa’； $'nav span'.css'color'，'fafafafa'； $nav.removeClasshidden.addClassvisible； $nav a.removeClasshidden.addClassvisible； $nav span.removeClasshidden.addClassvisible； } } 如果宽度>=750{ 如果滚动位置>40{ $nav.removeClassvisible.addClasshidden； $nav a.removeClassvisible.addClasshidden； $nav span.removeClassvisible.addClasshidden； } 如果滚动位置>620{ $nav.removeClasshidden.addClassvisible； $nav a.removeClasshidden.addClassvisible； $nav span.removeC lasshhidden.addClassvisible； $nav.css'background-color'，'fafafafa'； $nav a.css'color'，'404040'； $'nav span'.css'color'，'404040'； }else{//范围[0620] $nav.css'background-color'，'transparent'； $nav a.css‘颜色’、‘fafafa’； $nav span.css'color'，'fafafafa'； } 如果滚动位置>1200{ $nav a.css‘颜色’、‘33adff’； $nav span.css'color'，'33adff'； } 如果滚动位置>1220{ $nav.css'background-color'，'fafafafa'； } 如果滚动位置<40{ $nav.css'background-color'，'transparent'； $nav a.css‘颜色’、‘fafafa’； $'nav span'.css'color'，'fafafafa'； $nav.removeClasshidden.addClassvisible； $nav a.removeClasshidden.addClassvisible； $nav span.removeClasshidden.addClassvisible； } } }; };
我建议将$window.width存储在一个变量中，因为所有变量都是在同一时刻执行的。请原谅我，您将如何使用jQuery选择器生成一个变量？您是一个绝对的明星，我现在就开始讨论这个问题。非常感谢。
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
{if(($(window).width() >= 1350 && scroll_pos > 50)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1350 && scroll_pos > 690)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos > 1270)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1350 && scroll_pos > 1290)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos < 50)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
if(($(window).width() >= 1020 && scroll_pos > 45)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1020 && scroll_pos > 650)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos > 1220)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1020 && scroll_pos > 1245)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos < 45)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
{if(($(window).width() >= 750 && scroll_pos > 40)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 750 && scroll_pos > 620)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos > 1200)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 750 && scroll_pos > 1220)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos < 40)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
});
});
```