Why Jquery Isvisible Does Not Work Along With Scroll Function

My code is as shown below; For this , I am following this example. Now everything works fine. But what I want to do is when user scroll down, the color of nav menu should change,w

Solution 1:

here is working example -

$(document).ready(function () {
 $(".menu").addClass("changeBg");
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        var id = $("#menu-center a:first").attr('href');
        if(target == id){
         $(".menu").addClass("changeBg");
         }
         else{
         $(".menu").removeClass("changeBg");
         }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

functiononScroll(event){
if ($('#menu-center a:first').hasClass('active')) {
     $(".menu").addClass("changeBg");
}
else{
$(".menu").removeClass("changeBg");
}
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        var id = $("#menu-center a:first").attr('href');
      
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        
        else{
            currLink.removeClass("active");
        }
    });
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color:#000;
    position: fixed;
    background-color:#000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-centerul {
    margin: 15px000;
}
#menu-centerulli {
    list-style: none;
    margin: 030px00;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}
.changeBg{background:rgba(0, 0, 0, 0.22);}
.changeBga{color:#000}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="m1 menu"><divid="menu-center"><ul><li><aclass="active"href="#home">Home</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#about">About</a></li><li><ahref="#contact">Contact</a></li></ul></div></div><divid="home"></div><divid="portfolio"></div><divid="about"></div><divid="contact"></div>

Solution 2:

var query = $('.active');

You need to use a . beforeactive since it's a class name.