Question

我有一个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/

Answer 1

您的代码段在jQuery被包含之前
$未定义，jQuery是。

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

Answer 2

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

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

Answer 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"});
    }
});
});//]]>

应该让任何其他人需要它

在页面滚动上更改wordpress naviagtion背景

3 个答案: