使用 Javascript 更改 Wordpress 中的导航 CSS答案

【问题标题】：Change Navigation CSS in Wordpress with Javascript使用 Javascript 更改 Wordpress 中的导航 CSS
【发布时间】：2013-04-29 13:50:47
【问题描述】：

我为我的 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 模板文件中调用它的方式有问题吗？

【问题讨论】：

标签： php javascript css wordpress navigation

【解决方案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'});
            }
        }
    });
});

【讨论】：

感谢您的回复...尽管更改后仍然无法正常工作。我认为这可能是我如何将其调用到我的 PHP 文件中的问题。也许有更好的方法来实现这一点？
我也在尝试这个 javascript 文件，我认为它更干净，但仍然无法正常工作。 $(document).scroll(function() {$('#menu-above-header-homepage').toggle($(this).scrollTop() > 250); });

【解决方案2】：

修正了代码中的错误：

$(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”之类的东西

【讨论】：