Mahaveer sharma Mahaveer sharma - 3 months ago 13
CSS Question

jQuery scroll event contradicting CSS hover

I have this navbar on top, When i hover over the links the CSS hover changes the color of links from white to wheat.

I also have jQuery code which changes the color of header and links when the user scrolls.

So the problem is that CSS hover works only once , as soon as the user scrolls up or down , the CSS hover stops working and i want the CSS hover to change color of links from white to wheat again as soon as the user scroll back to top.

here is the HTML



<header class = "header container-fluid navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Anime</a></li>
<li><a href="#">Manga</a></li>
<li><a href="#">Games</a></li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a data-toggle="modal" data-target="#myModal" >Log-In</a>

</li>
<li><a href="#">Sign-Up</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Watch Paralax</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>
</body>


CSS

body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}


jQuery

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{ $('.navbar-inverse .navbar-brand').css({"color":"black"});
$('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
$('.header').css({"background":"white"});
} else {
$('.navbar-inverse .navbar-brand').css({"color":"white"});
$('.header').css({"background":"rgba(1,1,1,.8)"});
$('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
}
});


I tried
removeAttr("style")
and it just removes the style completely

Answer

I like the !important tag from Tibi unless you want a different hover style when you are not at the top. To use separate hover colors for the top and otherwise you can add the styles back when the scroll is at the top with your jQuery like below, but be sure to add the style that you want for both the if and the else in you jQuery:

$('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});},function(){$(this).css({"color":"white"});});

and

 $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});

Here is the working example:

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{  $('.navbar-inverse .navbar-brand').css({"color":"black"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
   $('.header').css({"background":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"balck"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"black"});});
} else {
   $('.navbar-inverse .navbar-brand').css({"color":"white"});
   $('.header').css({"background":"rgba(1,1,1,.8)"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
}
});
body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>

Comments