php - 使用 Javascript 更改 Wordpress 中的导航 CSS

Question

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

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