Jquery: change opacity on menu hover

Question

I have an fixed menu that i want to change opacity when scrolled down and back up, so I made this:

JQuery: https://paste.ee/p/Ew9UW

HTML: https://paste.ee/p/5PTOE

CSS: https://paste.ee/p/RCtLj

Its working how i want, but i want to add one thing and I have no idea how. I want to change opacity back to 1.0 when I hover over the menu bar at any point of the site (top middle bottom, it must work everywhere) Any idea how to make it?

Fiddle example

JS :

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 70) {
        $("nav").css("opacity", "0.2");
    }
    else {
        $("nav").css("opacity", "1");
    }   
});

Thansk for your help

Answer 1

see here jsfiddle

first of all, nav is a class of an ul , so to call it you need to put a . in front of it .nav

second, just add !important to .nav:hover{opacity:1!important} so that it will overwrite the JQ. it's the quickest way...not the best way

code :

.nav:hover {
    opacity: 1!important;
    transition: 0.01s;
    background-color: #111;
    transition: 0.3s;

}

OR . a nicer way to do it is like this jsfiddle

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

    if (scroll >= 70) {
        $(".nav").addClass("opac");
    }
    else {
        $(".nav").removeClass("opac")
    }   
});

CSS :

.nav.opac {opacity:0.2}
.nav.opac:hover { opacity:1;}

Add a class .opac to the .nav when scroll and then style that class in CSS. so no need for that ugly !important

Answer 2

Change the opacity value in the .nav:hover rule in your CSS:

.nav:hover{
    opacity: 1.0 !important;
}

I would choose the CSS way in terms of performance. Don't overuse JS animation and go with CSS instead.