滾動時更改CSS樣式的值

Question

首先，我想解釋我想要做什麼，我想更改滾動時某個CSS樣式的值爲border-bottom-color。但問題是，它不工作，而另一種風格正在工作.navbar-inverse .navbar-nav>li>a。有人可以解釋爲什麼它不起作用嗎？我是HTML和CSS的新手。

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 36) { 
 
     $(".navbar-inverse .navbar-nav>li>a").css("color", "white"); //Working 
 
     $(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "white"); 
 
    } else { 
 
     $(".navbar-inverse .navbar-nav>li>a").css("color", "black"); //Working 
 
     $(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "rgb(2,1,131)"); 
 
    } 
 
    }) 
 
})

.navbar-inverse .navbar-nav>li>a { 
 
    color: black; 
 
    padding-top: 80px; 
 
    padding-left: 30px; 
 
    font-weight: bold; 
 
    border-bottom: 3px solid transparent; 
 
    transition: border-bottom-color 0.5s ease-in-out; 
 
    -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 
} 
 

 
.navbar-inverse .navbar-nav>li>a:hover { 
 
    color: rgb(2, 1, 131); 
 
    border-bottom-color: rgb(2, 1, 131); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a> 
 
     <img src="img/gear.png" class="gear" width="15px"> 
 
     <img src="img/lightning.png" class="lightning" width="25px"> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">Careers</a></li> 
 
     <li><a href="#">Clients</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Team</a></li> 
 
     <li><a href="#">HR Express</a></li> 
 
     <li><a href="#">Activities</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

我會建議使用CSS在jQuery的像下面

$(document).ready(function() { 
 

 
    $(".navbar-inverse .navbar-nav>li>a").mouseover(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 36) { 
 
     $(this).css("color", "red"); //Working 
 
     $(this).css("border-bottom-color", "rgb(2, 1, 131)"); 
 
    } else { 
 
     $(this).css("color", "black"); //Working 
 
     $(this).css("border-bottom-color", "rgb(2,1,131)"); 
 
    } 
 
    }); 
 
    
 
    $(".navbar-inverse .navbar-nav>li>a").mouseleave(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 36) { 
 
     $(this).css("color", "black"); 
 
     $(this).css("border-bottom-color", "transparent"); 
 
    } else { 
 
     $(this).css("color", "black"); 
 
     $(this).css("border-bottom-color", "transparent"); 
 
    } 
 
    }); 
 
    
 
})

.navbar-inverse .navbar-nav>li>a { 
 
    color: black; 
 
    padding-left: 30px; 
 
    font-weight: bold; 
 
    border-bottom: 3px solid transparent; 
 
    transition: border-bottom-color 0.5s ease-in-out; 
 
    -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 
} 
 

 
.navbar-inverse .navbar-nav>li>a:hover { 
 
    color: rgb(2, 1, 131); 
 
    border-bottom-color: rgb(2, 1, 131); 
 
} 
 

 
body { 
 
    height: 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a> 
 
     <img src="img/gear.png" class="gear" width="15px"> 
 
     <img src="img/lightning.png" class="lightning" width="25px"> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">Careers</a></li> 
 
     <li><a href="#">Clients</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Team</a></li> 
 
     <li><a href="#">HR Express</a></li> 
 
     <li><a href="#">Activities</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

試着改變你這樣的腳本

var wrap = $("#wrap"); 

wrap.on("scroll", function(e) { 

    if (this.scrollTop > 147) { 
     // change color here 
    } else { 
     // change color here 
    } 

}); 

Answer 3

我建議你定義一個單獨的樣式兩種情況，即.navbar-menuitem和.navbar-menuitem-scrolled或類似的東西。然後使用Javascript來添加或刪除您定位的項目中的課程。

你在上面的jQuery中試圖做的是針對元素可能狀態的CSS。除非元素已處於懸停狀態，否則jQuery無法訪問該元素。 jQuery用於操縱當前狀態下的元素，而不是它們的樣式表，儘管它可以訪問當前應用的樣式。

使用.addClass()和。 removeClass()方法來解決您的問題。請記住使用.hasClass()，以便在頁面上下滾動時不會添加十億次類。

Answer 4

你不能在腳本選擇器上使用：hover css。你可以使用jquery hover()或mouseover()來實現這一點。類似下面

$('.navbar-nav>li>a').hover(function(){ 
    if(scroll>36){ 
     //change border-color 
    } 
    else{ 
     //change border-color 
    } 
});