javascript - 请帮我解决这个平滑的 float 卷轴

Question

好吧，我有这个静态的导航菜单，但我想让它在用户向下或向上滚动他的页面时流畅地流动...请帮助编写代码，因为我已经尝试过做一些事情，但一切都变坏了。

代码:

<div id="menu">

        <ul>

            <li class="page_item">

                <a href="<?php bloginfo('url'); ?>" title="Go home">Home</a>

            </li>

            <?php wp_list_pages('&title_li=&exclude=6386'); ?>

            <?php

            if(is_user_logged_in() && !current_user_can('subscriber')) :

            ?>

            <li class="page_item">

                <a href="<?php bloginfo('url'); ?>/tasks/" title="Your task list">Tasks</a>

            </li>

            <?php

            endif;

            ?>

            <?php

            if(!is_user_logged_in()) :

            ?>

            <li class="page_item">

                <a href="<?php bloginfo('url'); ?>/wp-admin/">Log in</a>

            </li>

            <?php

            endif;

            ?>

        </ul>

    </div>

我想让这一切漂浮起来，我该怎么做呢？

我尝试添加这个脚本并给菜单类="scroller":

$(window).load(function(){
$(window).scroll(function(){
    if($(window).scrollTop()>60){
        $('.scroller').css('position', 'fixed');
        $('.scroller').css('top', 0);
    } else {
        $('.scroller').css('position', 'relative');
        $('.scroller').css('top', 60);
    }
});

});

但是没有运气..

Answer 1

首先，因为您使用的是 jQuery，所以您不必绑定(bind) onLoad 事件来执行此操作。只需绑定(bind) onDomReady 伪事件，无需创建任何其他类(您已经拥有 ID)。也就是说，您需要监听文档的 onScroll 事件。试试这个:

$(function(){
    $(document).on('scroll',function(){
        var $this = $(this),
            $menu = $('#menu'),
            scrl = $this.scrollTop(),
            menuHeight = $menu.height();

        if( scrl > menuHeight ) {
            $('#menu').css({
                'position': 'fixed',
                'top': 0
            });
        } else {
            $('#menu').css({
                'position': 'relative',
                'top': menuHeight
            });
        }
    });
});

这应该可以很好地满足您的需求。

这是一个 jsFiddle测试代码。

编辑:更新代码以动态处理每个菜单高度。