2

如果这很重要，我正在使用Arras 主题在Bitnami Wordpress Stack上建立一个本地网站。

我正在制作一个固定菜单，在页面上向下滚动 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

尝试使用 vanilla js 代替 $ (window).scrollTop()trywindow.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 回答
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 回答