0

我只为主页创建了我的 wordpress 网站的自定义标题导航。在所有其他页面上，我使用的是默认主题导航。但是，在主页上，向下滚动到自定义导航后，我想显示默认主题导航。我想我可以使用带有滚动功能的javascript，这样一旦我过去了，比如100px，JS就会将css属性从display：none更改为display：block，或者类似的东西。

我创建了一个 JS 文件：

    var fixed = false; $(document).scroll(function() {
            if( $(this).scrollTop() > 100 ) {
                if( !fixed ) {
                    fixed = true;
                    $('#menu-above-header-homepage').css({position:'fixed', display:'block'});
                }
            } else {
                if( fixed ) {
                    fixed = false;
                    $('#menu-above-header-homepage').css({display:'none'});
                }
            }
        });

我正在使用从文件 homepage_nav.js 到主页 PHP 模板调用脚本到模板头中

<script type="text/javascript" src="http://dev.brooklyn.cd/wp-content/themes/_eco/js/homepage_nav.js"></script>

我无法让它工作。我的 JS 或者我在 PHP 模板文件中调用它的方式有问题吗？

4

2 回答 2

1

您必须将所有内容放在 ready() 函数中并在window滚动时激活它。

$(document).ready(function{
    var fixed = false;
    $(window).scroll(function() {
        if( $(this).scrollTop() > 100 ) {
            if( !fixed ) {
                 fixed = true;
                 $('#menu-above-header-homepage').css({position:'fixed', display:'block'});
            }
        } else {
            if( fixed ) {
                 fixed = false;
                 $('#menu-above-header-homepage').css({display:'none'});
            }
        }
    });
});
于 2013-04-29T13:53:43.013 回答
0

修复了代码中的错误：

$(document).ready(function(e) {
  $(window).scroll(function() {
    if( $(this).scrollTop() > 100 ) {
        $('#menu-above-header-homepage').css({position:'fixed', display:'block'});
    } else {
        $('#menu-above-header-homepage').css({display:'none'});
    }
  });
});

不需要固定标志，如果你想使用它，然后重命名该变量，因为该变量名称“固定”已经是一个 javascript 属性，将其重命名为“isFixed”

于 2013-05-16T09:34:30.660 回答