2016-10-16 5 views
-3

У меня есть веб-сайт WordPress делает использование преуспевать темы,изменить WordPress фон naviagtion на свитка странице

в первую очередь я настроить свой навигационный заголовок фиксированной и прозрачной.

Но теперь я пытаюсь сделать свой заголовок/панель навигации изменением цвета фона с прозрачным на прокрутке страницы.

Я проверил в Интернете и в настоящее время я пытался использовать 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/ 

ответ

0
  1. Вы фрагмент кода предшествует jQuery включен
  2. $ не определен, но jQuery есть.

Проверьте ошибки на панели.

+0

сделать и есть лучший способ реализации этого, Потому что я честно скопировал это с онлайн –

0

На вашем сайте ваш заголовок не имеет класса, но в вашем коде вы нацеливаете его.

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

хорошо спасибо, позвольте мне изменить мой код, чтобы он соответствовал dat –

+0

iv отредактировал мой код, чтобы иметь $ ('header') //, но он все еще выполняет работу –

0

спасибо всем за ваше время.

я был в состоянии решить эту проблему

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

должен упаковывают любой другой нуждается в этом

Смежные вопросы