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

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

Demo

Answer 2

为了完整起见，我将发布我的代码：

首先，代码包含一个自执行函数，以防止库之间发生冲突：

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

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

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

请参阅演示here。

无论如何，“在滚动前隐藏div”代码都不起作用

2 个答案:

的jQuery

HTML

Demo