web-dev-qa-db-fra.com

Changer le fond d'un élément pendant le défilement

Essayer de faire fonctionner ce script ce site :

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

Si vous faites défiler l'écran presque à l'écran vers le bas, l'en-tête de l'arrière-plan doit devenir opaque au lieu de rester semi-transparent. Donc, je ne suis pas sûr de savoir pourquoi cela ne fonctionne pas. N'importe qui?

javascript
2
user1813113

Il y a plusieurs erreurs dans votre script et CSS, je ne sais pas par où commencer ...

  • Vous mélangez $ Et jQuery dans votre code. Joomla charge jQuery en mode noConflict, il vaut donc mieux utiliser jQuery

  • La variable t ne peut pas être définie car elle s'exécute avant que le DOM ne soit prêt. Assurez-vous d'attendre que le DOM soit prêt:

    jQuery(function(){ 
   var t = jQuery('#preschool-program').offset().top - 120; 
});

  • La deuxième partie devrait ressembler à ceci:

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

    Cela fonctionne fondamentalement (le style est ajouté à l'élément d'en-tête), mais le fichier http://nettra.net/demo-sites/wvg/development/templates/wvgs/css/bootstrap.css Définit le fond de l'en-tête en utilisant background: rgba(0,0,0,0.5)!important; vers la ligne # 10983, redéfinir votre style en ligne. Si vous supprimez !important Et apportez les modifications ci-dessus, cela devrait fonctionner.

2
johanpw

Juste un ajout à la réponse de @ Johanpw.

jQuery a quelques problèmes avec l'attribut !important lors de l'utilisation de .css(), que vous devrez utiliser comme Bootstrap l'utilise.

Voici 2 alternatives que vous pouvez utiliser.

Solution 1:

Vous pouvez appliquer votre style en utilisant la fonction .style:

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

Solution 2:

Vous pouvez également ajouter une classe utilisant jQuery et cibler cette classe à l'aide de CSS, ce qui est beaucoup plus rapide que d'appliquer le style via jQuery lui-même.

jQuery:

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

CSS:

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

Code complet en utilisant la solution 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');
        }       
    });

});
1
Lodder