Изменение фона элемента во время прокрутки

Попытка заставить этот скрипт работать на этом сайте :

var t = $('#preschool-program').offset().top - 120;

    jQuery(document).scroll(function(){
        if($(this).scrollTop() > t) {   
        $('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    } 
    });         

Прокрутка вниз почти на 1 /2way на экране, а заголовок фона должен быть непрозрачным, а не оставаться полупрозрачным. Поэтому я не уверен, почему он не работает. Кто-нибудь?

2 голоса | спросил user1813113 3 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 03 Sep 2015 23:48:20 +0300 2015, 23:48:20

2 ответа


2

В вашем скрипте и CSS есть несколько ошибок, я не уверен, с чего начать ...

  • Вы смешиваете $ и jQuery в вашем коде. Joomla загружает jQuery в режиме noConflict, поэтому вам лучше использовать jQuery
  • Переменная t не может быть установлена, поскольку она выполняется до того, как DOM готов. Убедитесь, что вы дождались готовности DOM:

    jQuery(function(){ 
       var t = jQuery('#preschool-program').offset().top - 120; 
    });
    
  • Вторая часть должна выглядеть так:

    jQuery(document).scroll(function(){
        if(jQuery(this).scrollTop() > t) {   
            jQuery('body.index header').css({"background-color":"rgba(0,0,0,1)"});
    } 
    });
    

    В основном это работает (стиль добавляется в элемент заголовка), , но набор файлов http://nettra.net/demo-sites/wvg/development/templates/wvgs/css/bootstrap.css фон заголовка с помощью background: rgba(0,0,0,0.5)!important; примерно по строке # 10983, переопределяя ваш встроенный стиль. Если вы удалите !important и выполните указанные выше изменения, он должен работать.

ответил johanpw 4 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 04 Sep 2015 01:23:46 +0300 2015, 01:23:46
1

Просто добавление к ответу @ Johanpw.

jQuery имеет некоторые проблемы с атрибутом !important при использовании .css(), который вы собираетесь использовать в качестве Bootstrap, использует его.

Вот 2 альтернативы, которые вы можете использовать.


Решение 1:

Вы можете применить свой стиль, используя функцию .style:

$('body.index header').attr('style', 'background-color: rgba(0,0,0,1) !important');

Решение 2:

Вы также можете добавить класс, используя jQuery, и настроить этот класс с помощью CSS, который намного быстрее, чем применение стиля через jQuery.

jQuery:

$('body.index header').addClass('customBG');

CSS:

.customBG {
    background-color: rgba(0,0,0,1) !important;
}

Полный код с использованием решения 1:

jQuery(document).ready(function ($) {

    var t = $('#preschool-program').offset().top - 120;

    $(document).scroll(function () {       
        if ($(this).scrollTop() > 0){ 
            $('body.index header').attr('style', 'background-color: red !important');
        }       
    });

});
ответил Lodder 4 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 04 Sep 2015 05:00:33 +0300 2015, 05:00:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132