用Javascript改变导航CSS - Change Navigation CSS in Wordpress with Javascript

Change Navigation CSS in Wordpress with Javascript

本文关键字：CSS 导航改变 Javascript | 更新日期: 2023-09-27

我为我的wordpress网站创建了一个自定义的标题导航，仅用于主页。在所有其他页面上，我使用默认主题导航。然而，在主页上，当我向下滚动到自定义导航之后，我想要显示默认主题导航。我想象我可以使用javascript的滚动功能，这样一旦我超过了，说100px, JS将改变css属性从display:none显示:块，或类似的效果。

我创建了一个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模板文件的方式?

您必须将所有内容放入ready()函数中，并在window scroll上激活它。

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

修复了代码中的错误:

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

不需要固定标志，如果你想使用它，那么重命名该变量因为变量名'fixed'已经是一个javascript属性，重命名为'isFixed'