Jquery 根据滚动位置使用动画更改类

我的页面包含四个部分，每个部分设置为100%高度，背景颜色不同。在最上面我有一个固定的菜单。我希望菜单根据用户当前所在的区域更改其背景颜色，以便更好地与背景融合

到目前为止，我已经设法使菜单的背景颜色改变时，投资组合是进入，但它不多，我卡住了。它必须再次改变它的颜色，当用户滚动回到主页，再滚动到大约等等。另外，我希望它被设置动画，但我不知道如何将animate（）与addClass（）一起使用。在过去的两天里，我一直在努力，但没有成功

另一件折磨我的事情是菜单元素也应该响应滚动位置。例如，如果用户从主页滚动到公文包，则活动类应应用于公文包并从主页删除。希望你有这个想法

到目前为止，我的代码如下所示：

<div class="menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a class="inactive" href="#portfolio">Portfolio</a></li>
            <li><a class="inactive" href="#about">About</a></li>
            <li><a class="inactive" href="#contact">Contact</a></li>
        </ul>
    </div>
    </div>
    <div id="home"></div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="contact"></div>

见此：

---

另一种稍微不同的方法是检查元素是否在视图中。我将这个解决方案建立在这里提供的一个很好的小功能上：Scott Dowding。您可以使用此技术轻松地为每个div部分设置颜色/类

解决方案小提琴：

CSS:

jquery：

function isInView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function () {
var menu = $('.menu');
    $(window).scroll( function () {
        if (isInView( $('#portfolio-section') ) ){
            menu.addClass('menu-light');
        }else{
            menu.removeClass('menu-light');
        }            

    });
});

功能isInView（元素）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
$（文档）.ready（函数（）{
变量菜单=$（'.menu'）；
$（窗口）。滚动（函数（）{
如果（isInView（$（“#投资组合部分”））{
menu.addClass（'menu-light'）；
}否则{
menu.removeClass（'menu-light'）；
}            
});
});

试试这个。 我为每个div分配了不同的类，因此您可以更容易地看到转换

包括动画（来自SO问题），使用以下内容：

div {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

添加了一个新类，用于定位hover的div

<div class="hoverDiv" id="home">home<p></p></div>

嗯

这里：

使用：

var menu = $('.m1');

$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('#portfolio').offset().top;

if (y >= z) {
    menu.removeClass('menu').addClass('light-menu');
}
else{
    menu.removeClass('light-menu').addClass('menu');
}
});

以及：

---

它工作得很好：）不过，你有没有办法让我的课堂变化变得生动起来？有办法；）我来试试看！：）太好了，如果对你有用的话，我能投你一票吗？谢谢：）我尝试了所有的建议，这对我来说最有效！谢谢！如果我能给你一个信用，让我知道；）我是新来的SOThank你-只需接受答案并投赞成票。。。。请注意，该键是具有不透明度的菜单背景-

背景颜色：rgba（4,180,49,0.6）玩得开心！！
div {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

<div class="hoverDiv" id="home">home<p></p></div>

$('.hoverDiv').hover(function(){
    //adjust the menu background color
    removeMenuClasses();
    menu.addClass($(this).attr('id') + '-menu');
});

function removeMenuClasses(){
    var classNames = menu.attr('class').split(' ');
    for(var i = 0;i < classNames.length; i++){
        if(classNames[i].indexOf('menu') >= 0){
            menu.removeClass(classNames[i]);
        }
    }
}

if (y >= contact_position) {
    menu.addClass($("#contact").attr('id') + '-menu');
}
else if (y >= about_position) {
    menu.addClass($("#about").attr('id') + '-menu');
}

var menu = $('.m1');

$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('#portfolio').offset().top;

if (y >= z) {
    menu.removeClass('menu').addClass('light-menu');
}
else{
    menu.removeClass('light-menu').addClass('menu');
}
});

    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;