用Javascript更改导航CSS的WordPress的

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

我创建了一个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模板文件中？

来源

2013-04-29 bcreative

你必须把所有就绪（）函数中并激活它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-29 13:53:43 Svetoslav

感谢您的回复......尽管这种变化仍然没有奏效。我认为这可能是我如何将它调入我的PHP文件的问题。也许有完全更好的方法来完成这个？ – bcreative 2013-04-29 14:24:48

我也在尝试这个JavaScript文件，我认为这是更清洁，但仍然无法正常工作。 $（document）.scroll（function（）{$（'＃menu-above-header-homepage'）。toggle（$（this）.scrollTop（）> 250）;}）;'' – bcreative 2013-04-29 15:21:10

代码

固定的错误：

$(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'

来源

2013-05-16 09:34:30

用Javascript更改导航CSS的WordPress的

回答

相关问题