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'});在声明中添加第二条规则if，但这根本不起作用。我怎样才能结合这两个事件？

编辑：稍后我将添加更多滚动位置，我只想让它先在一个上工作，其余的我可以自己解决。

对于奖励积分，我的整个文件如下所示：

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 NavandColor Change功能结合起来，有什么办法吗？我在正确的事情（document，window）上调用 jQuery 吗？

我使用jQuery而不是$因为我计划将此作为 Wordpress 网站的静态登录页面。

相关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 回答