Question

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

到目前为止，我已经设法在输入投资组合时改变菜单的bg颜色，但它并不多，而且我被卡住了。当用户滚动回到家，大约到大约等等时，它必须再次改变它的颜色。此外，我希望它是动画的，但我不知道如何使用addClass（）的animate（）。过去两天我一直在努力，但根本没有成功。

折磨我的另一件事是菜单元素也应该响应滚动位置。例如，如果用户从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问题），使用此：

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;

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

4 个答案: