2

重要な場合は、Arras テーマを使用して、 Bitnami Wordpress Stackでローカル Web サイトを構築しています。

ページを 190 ピクセル下にスクロールした後に表示する固定メニューを作成しています。問題は、どの JQuery または JavaScript コードを試しても、すべてが機能することです。ここで StackOverflow を検索して検索しましたが、この質問が以前に何度もここで尋ねられたことを知っていますが、見つけることができるすべてのコードを試しましたが、どれも機能しません。これは私のメニューの JavaScript/JQuery/HTML/PHP コードで、header.phpファイルに配置されています。

<div class="medfolg" id="medfolg">
<script type="text/javascript">
    $(document).ready(function(){
      $(window).bind('scroll', function(){
        if($(window).scrollTop() > 190){
            $('#medfolg').show();
        } else {
            $('#medfolg').hide();
        };
      });
    });
</script>
<?php 
if ( function_exists('wp_nav_menu') ) {
    wp_nav_menu( array( 
        'menu' => 'medfolg',
        'menu_class' => 'sf-menu'
    ) );
}   
?>
</div>

これは、 default.cssファイルに配置した CSS コードです。

#medfolg.medfolg {position:fixed;}
#medfolg  { text-transform: lowercase; position: absolute; top: 0; width: 100%; background: #f5f5f5; z-index:5000; display: none;}
#medfolg .menu-medfolg-container { width: 980px; margin: 0 auto; }
#medfolg .sf-menu { position: relative; top:3px !important; }
#medfolg .sf-menu a  { font-size: 22px; color: #444; margin-right: 15px;}

どうしても助けが必要です - お願いします!

編集:ここで jsFiddle を少しだけ変更して作成しました (Wordpress .php メニューは Wordpress 以外の場所では読み取れません): http://jsfiddle.net/wHMjr/

4

2 に答える 2

1

完全を期すために、コードを投稿します。

まず、ライブラリ間の競合を防ぐために、コードは自己実行関数でラップされます。

(function($){
    //code goes here, now $ is a local reference to the jQuery object.
})(jQuery)

次に、ハンドラーを作成します。

var setMenuVisibility = function(){
    if($(window).scrollTop() > 190){
        $('#medfolg').show();
    } else {
        $('#medfolg').hide();
    };
}

ウィンドウのスクロール イベントに関連付けられ、スクロール ステータスに応じてメニューの可視性が変更されます。

アタッチは、関数をイベントにバインドすることによって行われます。

$(window).bind('scroll', setMenuVisibility);
//and set the initial visibility
setMenuVisibility();

上記のセクションの最後の行は、メニューの初期状態を設定します。これは、最初のスクロール値が表示されることを必要とする可能性があるためです (たとえば、ページの下のサブセクションへのリンク)。

ドキュメントのマークアップの準備が整うと、プロセス全体が開始されます。

ここでデモを参照してください。

于 2013-07-15T09:15:26.807 に答える
1

(window).scrollTop()$ tryの代わりにバニラ js を使用してみてくださいwindow.scrollY > 190

完全な機能については、私toggleもそう使用します：

jQuery

    //Use jQuery to make sure we are using correct function
    jQuery(window).on('scroll', function () {
        var el = jQuery('#medfolg');
        if (window.scrollY > 100) {
            el.show(); //Use this to toggle element visibility
        } else {
            el.hide()
        }
    });

HTML

<div style="display:none" id="medfolg">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">Articles</a>
        </li>
        <li><a href="#">Inspiration</a>
        </li>
    </ul>
</div>

デモ

于 2013-07-14T10:08:23.887 に答える