如何使滾動 jQuery 偵聽器適應 CSS 媒體查詢？ (Javascript/ jQuery / Bootstrap)
[英]How to adapt scrolling jQuery listeners to CSS media queries? (Javascript/ jQuery / Bootstrap)
問題描述
我對這一切都是陌生的； 所以過去一天我一直在嘗試讓 jQuery 運行。 我有一個導航欄 (nav bar)，它會根據滾動位置更改背景顏色/顏色，這是通過 jQuery 完成的。 我讓它在桌面寬度 (1350px) 上有效工作，但試圖兼顧媒體查詢和 jQuery 偵聽器似乎是不可能的。 我已經應用了我發現的所有東西，並嘗試了兩次但無濟於事。
HTML
HTML 是一個非常基本的 Bootstrap 導航欄，導航欄只是由於 jQuery（滾動位置）而改變
</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>
CSS
我想，CSS 唯一有趣的部分是所做的可見/隱藏更改。
.visible {
visibility: visible;
opacity: 1;
transition: opacity .35s linear, color .5s;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility .50s, opacity .50s linear, color .5s;
}
查詢
這些更改都是用 jQuery 實現的，導航欄應該根據使用的不同寬度/設備在不同的滾動位置以相同的方式更改 excat。 至關重要的是，我無法讓程序識別三個單獨的 ($(window).width()) 塊（即所有三個部分），識別一個很容易。 但是把二三混淆起來似乎是完全不可能的。
$(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");
}}
});
});
```
1 個解決方案
解決方案1
1 已采納 2020-01-21 20:27:58
我在嘗試了解您想要的間隔時遇到了一些困難，所以我提出了一些評論來幫助您實現您想要的，如果它不是這樣的話。 此外，我組合了 ifs 結構以避免無用地重新計算表達式。
$(document).ready(function () {
var scroll_pos = 0;
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
var width = $(window).width();
if (width >= 1350) {
// ALL WHAT FOLLOW IMPLIES THAT width >= 1350
// (1) : This overrides (2) because
if (scroll_pos <= 50) { // Range [0,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 (scroll_pos > 50) { // RANGE [50,+∝]
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (scroll_pos > 690) { // [689,∝]
$("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');
}
/**
*
* (2)
* THIS IS NEVER "VISIBILY EXECUTED" : SEE (1)
*
* YOU HAVE WRITTEN :
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
**/
if (scroll_pos > 1270) { // [1270,+∝]
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
/**
*
* NOTE THAT IF SCROLL_POS > 1970 EVERYTHING ABOVE WOULD BE EXECUTED SO YOU WOULD HAVE A COMBINATION
* THIS IS BECAUSE 1970 > 690 > 50 SO EVERYTHING ABOVE IS TRUE
* IF YOU WANT TO MAKE CLOSED INTERVALS PLEASE TRY PUTTING THE HIGHEST VALUE OF scroll_pos AT BEGINNING AND USING ELSE IF
*/
}
if (width >= 1020) {
if (scroll_pos >= 45) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (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 { // RANGE [0,620]
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if (scroll_pos > 1220) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if (scroll_pos > 1245) {
$("nav").css('background-color', '#fafafa');
}
if (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 (width >= 750) {
if (scroll_pos > 40) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (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 { // RANGE [0,620]
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if (scroll_pos > 1200) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if (scroll_pos > 1220) {
$("nav").css('background-color', '#fafafa');
}
if (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");
}
}
});
});
使用 javascript 或 jQuery 添加 CSS 媒體查詢
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.