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>

この全体を浮かせたいのですが、どうすればいいですか？

このスクリプトを追加して、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);
    }
});

});

しかし、運が悪い..

4

2 に答える 2

0

CSSプロパティ「top」は相対配置では機能しません。代わりにabsoluteを試してください。

$(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を次に示します。

EDIT : すべてのメニューの高さを動的に処理するようにコードが更新されました。

于 2013-01-29T00:33:47.427 に答える