0

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

到目前为止，我已经设法使菜单的 bg 颜色在输入投资组合时发生变化，但这并不多，我被卡住了。当用户滚动回到家时，它必须再次改变它的颜色，向前滚动到大约等等。另外，我希望它是动画的，但我不知道如何将 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');
        }
    });
});
4

4 回答 4

2

看到这个：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');
    }
});
于 2013-04-26T14:40:48.393 回答
0

试试这个小提琴。我为每个 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;
}

添加了一个新类来定位 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');
}

！

于 2013-04-26T14:54:11.417 回答
0

这里：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;
于 2013-04-26T15:09:25.240 回答
0

一个稍微不同的方法是检查元素是否真的在视图中。我将此解决方案基于此处提供的一个很棒的小功能：https : //stackoverflow.com/a/488073/1807551 by 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');
        }            

    });
});
于 2013-04-26T14:46:46.110 回答