javascript - 无论如何， "Hide div before scrolling"代码都不起作用

Question

我正在使用 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/

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

它将附加到窗口的滚动事件，并根据滚动状态更改菜单的可见性。

附件是通过将函数绑定(bind)到事件来完成的:

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

上一节中的最后一行设置菜单的初始状态，因为初始滚动值可能要求它可见(例如，指向页面下方部分的链接)。

整个过程在文档的标记准备就绪时启动。

查看演示 here .