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>

我希望整个事情能够浮出水面，我该怎么做呢？

我尝试添加此脚本并提供menu class =“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

CSS属性“top”不适用于相对定位。试试绝对。

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

编辑：您需要为要显示滚动条的位置上方或下方的元素添加边距，以便为其创建间隙。

Answer 2

首先，因为您正在使用jQuery，所以您不必绑定onLoad事件来执行此操作。只需绑定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。

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

请帮我这个光滑的浮动卷轴

2 个答案: