Change the value of CSS style when scrolled

Question

First of all I want to explain what I want to do, I want to change the value of a certain CSS style which is the border-bottom-color when scrolled. But the problem is, it's not working while the other style is working .navbar-inverse .navbar-nav>li>a. Can someone explain me why it's not working? I'm new to HTML and 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

I would suggest to use CSS over jquery like below

$(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

You cannot use :hover css on script selector. You are suppose to use jquery hover() or mouseover() to achieve this. Something like below

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

Answer 3

I suggest you define a separate style for both cases, i.e. .navbar-menuitem and .navbar-menuitem-scrolled or something similar. Then use Javascript to add or remove the class from the item you are targeting.

What you are trying to do in jQuery above is target the CSS of a possible state of the element. jQuery does not have access to that unless the element is already in the hover state. jQuery is used to manipulate the elements in their present state, not their stylesheets, though it does have access to the currently applied styles.

Use the .addClass() and .removeClass() methods to solve your problem. Remember to use .hasClass() so you do not add the class a billion times when scrolling up and down the page.

Answer 4

Try changing your script like this

var wrap = $("#wrap");

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

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

});