滾動方法內的JQuery懸停方法

我試圖模仿在this site上看到的導航欄，但我在JQuery中遇到了一些麻煩。我爲滾動格式使用if語句，然後在if語句的底部包含一個懸停方法。滾動方法內的JQuery懸停方法

$(function() { 
$(window).scroll(function() { 
var scroll = $(window).scrollTop(); 
if (scroll >= 100) { 
    $("nav").css("background-color","white"); 
    $("nav").css("height","75px"); 
    $(".navbar-default .navbar-brand").css("color","black"); 
    $(".navbar-default .navbar-nav > li > a").css("color","black"); 
} 
else { 
    $("nav").css('background-color','rgba(0, 0, 0, 0)'); 
    $(".navbar-default .navbar-brand").css("color","white"); 
    $(".navbar-default .navbar-nav > li > a").css("color","white"); 
    $("nav").css("height","125px"); 
    $("nav").hover(function(){ 
    $(this).css("background-color", "white"); 
    }, function(){ 
    $(this).css("background-color", "rgba(0, 0, 0, 0)"); 
    }); 
} 
}); 
});

與當前的代碼，我的問題是，懸停的方法是改變導航欄後，我滾動是透明的，當我想它不會改變，留下白色。

來源

2017-09-01 Chaz Michaels

您使用了太多的JavaScript。你應該讓CSS風格化你的元素。您應該簡單地向nav添加一個類，然後根據該類添加樣式，而不是使用多次.css。

.hover部分也可以在CSS中完成。經驗法則，您絕不應該在其他事件處理程序中附加事件處理程序;總有一種更好的方式。

最後，你應該有這樣的事情：

聲明，我沒有風格像你這樣，也沒用過你的HTML，所以你應該將這個代碼適應您的需求。

$(function() { 
 
    var $window = $(window).scroll(function() { 
 
    \t var scroll = $window.scrollTop(); 
 
     $("nav").toggleClass("sticked", scroll >= 100); 
 
    }); 
 
});

body{ 
 
    height : 300vh; 
 
} 
 

 
nav{ 
 
    position : fixed; 
 
    top : 0; 
 
    left : 0; 
 
    width : 100%; 
 
    height : 125px; 
 
    background : transparent; 
 
    } 
 
    
 
    nav .text{ 
 
    color : black; 
 
    } 
 
    
 
    nav:hover{ 
 
    background: red; 
 
    } 
 
    
 
    nav:hover .text{ 
 
     color : white; 
 
    } 
 
    
 
    nav.sticked{ 
 
    background : red; 
 
    height : 75px; 
 
    } 
 
    
 
    nav.sticked .text{ 
 
     color : white; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<span class="text">text here</span> 
 
</nav>

來源

2017-09-01 21:00:40

滾動方法內的JQuery懸停方法

回答

相關問題