在页面滚动时更改 wordpress 导航背景答案

【问题标题】：change wordpress naviagtion background on scroll of page在页面滚动时更改 wordpress 导航背景
【发布时间】：2016-10-16 20:42:52
【问题描述】：

我有一个 wordpress 网站，使用了一个蓬勃发展的主题，

首先，我将导航标题自定义为固定且透明的。

但现在我正试图让我的标题/导航栏在页面滚动时从透明更改背景颜色。

我在网上查了一下，目前我尝试使用jquery更改颜色，但没有成功，这是我尝试过的

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".header").css('background-color', '#f0f0f0');
       } else {
          $('.header').css('background-color', 'transparent');
       }
   });
    }
});
});//]]> 

</script>

以及我的导航和标题的类代码 css

#floating_menu {position:fixed;}

header {
    background-color: rgba(52, 52, 52, 0);
}

谁能告诉我为什么这是不正确的，因为显然它不适合我。

这是供参考的网站

http://beyonddigital.mu/

【问题讨论】：

标签： jquery wordpress header navigation

【解决方案1】：

您的代码 sn-p 位于 jQuery 之前
$ 未定义，但 jQuery 已定义。

检查您的浏览器控制台以查看这些错误。

【讨论】：

你有更好的方法来实现这个，因为我老实说是从网上复制的

【解决方案2】：

在您的网站上，您的标题没有类，但在您的代码中，您的目标是一个。

$('.header')  //null
$('header') // <header class style>...</header>

【讨论】：

iv 将我的代码编辑为具有 $('header') // 但它仍然不起作用

【解决方案3】：

感谢大家的宝贵时间。

我能够解决这个问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var a = $("#floating_menu").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > a)
    {   
       $('#floating_menu').css({"background":"red"});
    } else {
       $('#floating_menu').css({"background":"transparent"});
    }
});
});//]]>

应该以防万一其他人需要它

【讨论】：