0

特定のスクロール位置で色が変わる固定位置のナビゲーションバーを含むランディングページを作成中です。現時点で私はこれを持っています：

// Change Nav Colors on Scrolldown
var scroll_pos = 0;
jQuery(document).scroll(function(){
    scroll_pos = jQuery(this).scrollTop();
    if(scroll_pos > 730){
        jQuery('.top-menu-navigation').css({'background-color' : '#000000'});
    } else if (scroll_pos < 730){
        jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'});
    }
});

さて、私のクラス.top-menu-navigationは、div の背景を設定する場所です。ただし、リンクの色は に設定されてい.top-menu-navigation ul > li aます。jQuery('.top-menu-navigation ul > li a').css({'color' : '#ffffff'});ステートメントの 2 番目のルールとして追加できると思っていましifたが、まったく機能しませんでした。これら 2 つのイベントをどのように組み合わせることができますか?

編集：後でスクロール位置をさらに追加する予定です。最初にスクロール位置を1つだけ動かしたいだけで、残りは自分で把握できます。

ボーナス ポイントとして、ファイル全体は次のようになります。

jQuery(document).ready(function(){

    // Create jQuery Tabs
    jQuery("#tabs").tabs().addClass('ui-tabs-vertical');


    // Sticky Top Nav

    var NavTop = jQuery('.top-menu-navigation').offset().top;

    jQuery(window).scroll(function(){
        if( jQuery(window).scrollTop() > NavTop ) {
            jQuery('.top-menu-navigation').css({position: 'fixed', top: '0px'});
        } else {
            jQuery('.top-menu-navigation').css({position: 'static'});
        }
    });

    // Change Nav Colors on Scrolldown

    var scroll_pos = 0;

    jQuery(document).scroll(function(){
        scroll_pos = jQuery(this).scrollTop();
            if(scroll_pos > 730){
                jQuery('.top-menu-navigation').css({'background-color' : '#000000'});
            } else if (scroll_pos < 730){
                jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'});
            }
        })
    });

Sticky Top NavとColor Change関数を組み合わせたいのですが、可能な方法はありますか? そして、正しいこと ( document、window) で jQuery を呼び出していますか?

これをWordpressサイトの静的ランディングページにする予定なので、jQuery代わりに使用しています。$

関連する html:

            <nav class="top-menu-navigation">

                <ul>
                    <li><a href="">Menu Item 1</a></li>
                    <li><a href="">Menu Item 2</a></li>
                    <li><a href="">Menu Item 3</a>
                        <ul>
                            <li><a href="">Submenu Item 1</a></li>
                            <li><a href="">Submenu Item 2</a>
                                <ul>
                                    <li><a href="">Link 1</a></li>
                                    <li><a href="">Link 2</a></li>
                                    <li><a href="">Link 3</a></li>
                                </ul>
                            </li>
                            <li><a href="">Submenu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="">Menu Item 3</a></li>
                </ul>

            </nav> <!-- end top-menu-navigation -->
4

1 に答える 1

1

次々と追加するだけで機能します。

// Sticky Top Nav
var NavTop = jQuery('.top-menu-navigation').offset().top;

var scroll_pos = 0;
jQuery(window).scroll(function(){
    if( jQuery(window).scrollTop() > NavTop ) {
        jQuery('.top-menu-navigation').css({position: 'fixed', top: '0px'});
    } else {
        jQuery('.top-menu-navigation').css({position: 'static'});
    }

    // Change Nav Colors on Scrolldown

    scroll_pos = jQuery(this).scrollTop();
        if(scroll_pos > 730){
            jQuery('.top-menu-navigation').css({'background-color' : '#000000'});
        } else if (scroll_pos < 730){
            jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'});
        }
});
于 2013-02-04T07:40:12.947 に答える