根据滚动位置更改带有动画的类

Question

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

到目前为止，我已经设法让菜单的背景颜色在输入投资组合时发生变化，但这并不多，我被卡住了。当用户滚动回到家时，它必须再次改变它的颜色，向前滚动到大约等等。另外，我希望它是动画的，但我不知道如何将 animate() 与 addClass() 一起使用。这两天我一直在尝试，但完全没有成功。

另一件折磨我的事情是菜单元素也应该响应滚动位置。例如，如果用户从 Home 滚动到 Portfolio，则应将活动类应用于 Portfolio 并从 Home 中删除。希望你明白了。

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

<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>

我不知道为什么，但是我不能在不破坏整个帖子的情况下在这里发布 css，所以只需转到 jsFiddle 一起查看。

$(document).ready(function () {
    var menu = $('.menu');
    var portfolio_position = $('#portfolio').offset().top;
    var about_position = $('#about').offset().top;
    var contact_position = $('#contact').offset().top;

    $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        if (scroll >= portfolio_position) {
            menu.removeClass('menu').addClass('menu-light');
        }
    });
});

Answer 1

看到这个：http://jsfiddle.net/Dxtyu/1/

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');
    }
});

Answer 2

一个稍微不同的方法是检查元素是否真的在视图中。我将此解决方案基于此处提供的一个很棒的小功能：https://stackoverflow.com/a/488073/1807551，作者为 Scott Dowding。您可以使用这种技术轻松地为每个 div 部分设置颜色/类。

解决方案：http://jsfiddle.net/acturbo/YzM3Q/

CSS：

.menu { background-color: #ffffff; }
.menu-light { background-color: #cc0000; }
/* this lets you easily set colors by div section/class:
.porfolio-section-bg  { background-color: #cc0000; }
*/

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');
        }            

    });
});

Answer 3

试试这个fiddle。 我为每个 div 分配了不同的类，以便您可以更轻松地查看转换。

包括动画（来自this SO question），使用这个：

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 以进行悬停。

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

然后对于更改事件和类替换，这个 jquery：

$('.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');
}

HTH！

Answer 4

这里：JSnippet DEMO

使用：

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;