0

私のページには 4 つのセクションがあり、それぞれが異なる背景色で高さ 100% に設定されています。一番上に固定メニューがあります。ユーザーが現在どのセクションにいるかに応じてメニューの背景色を変更して、背景との調和を高めたいと考えています。

これまでのところ、ポートフォリオが入力されたときにメニューの背景色を変更することはできましたが、それほど多くはなく、立ち往生しています。ユーザーがスクロールしてホームに戻ったり、前後にスクロールしたりすると、色を再度変更する必要があります。また、アニメーションさせたいのですが、animate()とaddClass()の使い方がわかりません。私は過去2日間試みてきましたが、まったく成功しませんでした。

私を悩ませているもう 1 つのことは、メニュー要素もスクロール位置に応答する必要があることです。たとえば、ユーザーがホームからポートフォリオにスクロールした場合、アクティブなクラスをポートフォリオに適用し、ホームから削除する必要があります。あなたがアイデアを得たことを願っています。

これまでのところ、私のコードは次のようになります。

<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

少し異なるアプローチは、要素が実際に表示されているかどうかを確認することです。このソリューションは、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 に答える
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

このフィドルを試してください。遷移をより簡単に確認できるように、各 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 に答える