0

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

代码：

<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);
    }
});

});

但没有运气..

4

2 回答 2

0

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);
    }
});

编辑：您需要在您希望滚动条出现的元素上方或下方添加一个边距，以便为其创建一个间隙。

于 2013-01-29T00:20:59.660 回答
0

首先，因为您使用的是 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 。

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

于 2013-01-29T00:33:47.427 回答