Control what mouseenter does depending on element color

Question

I have made a nav bar that is originally white, but when the user scrolls down, it becomes transparent. When the nav bar is white at the top of the page, if the user hovers, it becomes transparent, and when his cursor leaves it returns to white. Now, logically, the same should happen when scrolled down, and it does. I don't want that to happen, instead I want the nav bar to stay transparent. So I've written the following code, but it is not working.

var color = $('.nav a').css("color")
    if (color == rgb (0,0,249) ) {
        $(".nav a").mouseenter(function(){
            $(".nav a").stop( true ).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });

        $(".nav a").mouseleave(function () {
            $(".nav a").stop( true ).delay(300).animate({
                backgroundColor: 'white',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'white',
            });
        });
    } else {

        $(".nav a").mouseenter(function(){
            $(".nav a").stop( true ).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });

        $(".nav a").mouseleave(function () {
            $(".nav a").stop( true ).delay(300).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });
    }

I suggest you use CSS classes and add/remove the appropriate classes upon hover/exit. That will clean things up a bit (I believe) then you can add the necessary code to have a toggle flag for when to invoke the animations. — Forty3, Aug 01 '17 at 03:31
Can you please provide an example on how that would solve my problem? Thanks ;) — MullerA, Aug 01 '17 at 15:15

score 0 · Answer 1 · answered Aug 01 '17 at 15:54

Taking a cue from here:

https://stackoverflow.com/a/7317489/3485669

I present to you a jsFiddle which toggles some classes based on the scroll position of the overall body element (obviously, your selectors will be specific to you):

https://jsfiddle.net/vyxhxq94/1/

The code snippet below does not, for some reason, render the CSS transitions. However, the jsFiddle does. (Edit: seems the rendered code snippet isn't recognizing the :hover CSS class when the mouse enters it)

$("div.body").on("scroll", function(e) { 
 if ($("div.body").scrollTop() > 60) {
   $("div.nav").addClass("notAtTop").removeClass("atTop");
  } else {
   $("div.nav").addClass("atTop").removeClass("notAtTop"); 
  }
});

div.nav {
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
  z-index: 9999;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.atTop { 
  background-color: white;
}
.atTop:hover { 
  background-color: transparent;
}

.notAtTop { 
  background-color: transparent;
}
.notAtTop:hover { 
  background-color: transparent;
}

div.body {
  position: relative;
  background-color: green;  
  margin-top: 60px;
  height: 100vh;
  overflow: scroll;
}
div.innerBody {
  height: 4000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav atTop">
 <h3>
  <a>This is your nav bar.</a>
  <span id="scrollTop">0</span>
 </h3>
</div>
<div class="body">
 <h1>
  This is the rest of your body.
 </h1>
 <div class="innerBody">
  Some lengthy content...
 </div>
</div>

This may be a bit hard for me since I am using Bootstrap; thus my nav is comprised of multiple divs with different classes embedded within each other. Also; my function for transparency on scroll uses those different classes. So to apply this method of adding and removing classes would be quite problematic and tricky. This is why I saw colors as a more straightforward option — MullerA, Aug 01 '17 at 16:25

score 0 · Answer 2 · answered Aug 01 '17 at 19:56

Ok, I've found an answer using colors.

var trans=false;
// Navigation function
    $(".nav").mouseenter(function(){
        var colore="rgba(255, 255, 255, 0)";
        if($(".nav").css('background-color')==colore){
            trans=true;
        }else{
            trans=false;
        }
        $(".nav a").stop( true ).animate({
            backgroundColor: 'transparent',
        });

        $(".nav").stop( true ).animate({
            backgroundColor: 'transparent',
        });
    });

    $(".nav").mouseleave(function () {
        if(trans==false){
        $(".nav a").stop( true ).delay(300).animate({
            backgroundColor: 'white',
        });

        $(".nav").stop( true ).animate({
            backgroundColor: 'white',
        });
        }
    });

Control what mouseenter does depending on element color

2 Answers2