CODEWITHSUNDEEP
javascriptjquery
user2200657
user2200657

Reputation: 1

How to add hover effects for a menu bar that changes state on scroll?

I have a menu fixed at the top and at some point after it passes the var b = $(".brand-box") it changes its appearance. So, I have two states of my menu. Both of them need different hover states. Everything works perfectly up to a point when i try to implement them. How do i do it?

I tried to do it this way: 

$(document).ready(function() {
    var a = $(".nav-mobile");
    var b = $(".brand-box");
    var c = $(".menu_item");
    var d = $(".facebook-top");
    var e = $(".vk-top");
    var f = $(".menu-item-facebook");
    var g = $(".menu-item-vk");
    var posup = b.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= posup.top) {
            a.addClass("nav-mobile-black");
            c.addClass("menu-item-black");
            d.addClass("facebook-top-black");
            e.addClass("vk-top-black");
            f.addClass("menu-item-facebook-black");
            g.addClass("menu-item-vk-black");
            var indicator = false;

        } else {
            a.removeClass("nav-mobile-black");
            c.removeClass("menu-item-black");
            d.removeClass("facebook-top-black");
            e.removeClass("vk-top-black");
            f.removeClass("menu-item-facebook-black");
            g.removeClass("menu-item-vk-black");
            var indicator = true;
        }
        $(".menu_item").mouseover(function(){
            if (indicator) {
            $(this).addClass("menu_item-black-hover");
            }
            else {
            $(this).addClass("menu_item-hover");
            }
        });

        $(".menu_item").mouseout(function(){
            if (indicator==false) {
            $(this).removeClass("menu_item-black-hover");
            }
            else {
            $(this).removeClass("menu_item-hover");
            }
        });

    });
});

I also tried this. It didn't work

//$(".menu_item").mouseover(function(){
//    var that = this;
//    var z = $(".brand-box");
//    var pos = z.position();
//    $(window).scroll(function() {
//      var windowpos = $(window).scrollTop();
//        
//        if (windowpos >= pos.top) {
//

Upvotes: 0

Views: 152

Answers (1)

jyek
jyek

Reputation: 1091

You should implement hover states using pure CSS instead of adding classes to simulate a hover. Like so:

.myClass:hover {
  /* styles */
}

But to answer your question directly, this should work if you move your $(".menu_item").mouseover and $(".menu_item").mouseout functions into your if statement.

Upvotes: 1

Related Questions