it-swarm.com.de

Ändern Sie den Elementhintergrund während des Bildlaufs

Versucht, dieses Skript zum Laufen zu bringen diese Seite :

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

Wenn Sie auf dem Bildschirm fast halb nach unten scrollen, wird die Hintergrundüberschrift undurchsichtig, anstatt halbtransparent zu bleiben. Ich bin mir nicht sicher, warum es nicht funktioniert. Jemand?

2
user1813113

Es gibt mehrere Fehler in Ihrem Skript und CSS, ich bin nicht sicher, wo ich anfangen soll ...

  • Sie mischen $ Und jQuery in Ihrem Code. Joomla lädt jQuery im NoConflict-Modus, daher ist es besser, jQuery zu verwenden.
  • Die Variable t kann nicht festgelegt werden, da sie ausgeführt wird, bevor das DOM bereit ist. Stellen Sie sicher, dass Sie warten, bis das DOM bereit ist:

    jQuery(function(){ 
       var t = jQuery('#preschool-program').offset().top - 120; 
    });
    
  • Der zweite Teil sollte so aussehen:

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

    Das funktioniert im Grunde genommen (der Stil wird zum Header-Element hinzugefügt). aber Die Datei http://nettra.net/demo-sites/wvg/development/templates/wvgs/css/bootstrap.css Setzt den Hintergrund des Headers mit background: rgba(0,0,0,0.5)!important; ungefähr in Zeile # 10983. Überschreiben Sie Ihren Inline-Stil. Wenn Sie !important Entfernen und die obigen Änderungen vornehmen, sollte dies funktionieren.

2
johanpw

Nur eine Ergänzung zu @ Johanpws Antwort.

jQuery hat einige Probleme mit dem Attribut !important, wenn Sie .css() verwenden, das Sie als Bootstrap verwenden müssen.

Hier sind 2 Alternativen, die Sie verwenden können.


Lösung 1:

Sie können Ihr Styling mit der Funktion .style Anwenden:

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

Lösung 2:

Sie können auch eine Klasse mit jQuery hinzufügen und diese Klasse mit CSS als Ziel festlegen. Dies ist viel schneller als das Anwenden des Stils über jQuery.

jQuery:

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

CSS:

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

Vollständiger Code unter Verwendung von Lösung 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