Element css ändern, wenn div spezifische Klasse hat

Ich habe ein Problem mit meinem Code. Was ich tun möchte, ist css von elemnt zu ändern, wenn ich auf der ersten Div bin. Also, wenn ich am ersten div bin, habe mein Element zum Beispiel font-size: 24px; Wenn ich nach unten scrolle, sollte mein Element die Schriftgröße 40 haben; Ich benutze Wordpress und Vasen Thema. Meine Seite - http:///www.ciranga.pl Element css ändern, wenn div spezifische Klasse hat

Wenn ich auf der Hauptfolie (mit rotem Hintergrund) bin, möchte ich meine Pfeile auf rechts machen, um weiß zu sein. Wenn ich nach unten scrolle, möchte ich, dass es rot ist. Wie kann ich das machen? Jede Hilfe wäre großartig.

jQuery(document).ready(function($) { 
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) { 
    $('.vase_whiteC').css('font-size', '40px'); 
} else { 
    $('.vase_whiteC').css('font-size', '24px'); 
} 
$('html').keydown(function(e) { 

    var Key = e.keyCode; 

    if ([37, 38, 39, 40].indexOf(Key) > -1) { 

     // up! 
     if (Key == 38) { 
      $(".umicon-vase_arrowPrev").parent().trigger("click"); 
     } 

     // down! 
     if (Key == 40) { 
      $(".umicon-vase_arrowNext").parent().trigger("click"); 
     } 

     return false; 
    } 

}); 

});

Quelle

2017-04-21 MMPL1

Ich sehe Sie Code haben, den Pfeil in rot auf der Fußleiste sichtbar sein und versteckt auf Seite blättern können. Sie können dieselbe Methode verwenden, um eine Klasse hinzuzufügen, die je nach Anforderung eine andere Breite und Farbe hat. Dann können Sie eine solche Klasse zum Element hinzufügen und entfernen, das sein Aussehen ändern muss. Außerdem hast du die Klasse 'vase_whiteC' mit' color: #fff! Wichtig'. Sie müssen das entfernen und rote und weiße Klassen in Scroll-Position wechseln. –

Nach dem Original-Poster arbeiten, haben wir an dieser Lösung gekommen:

$(window).on('wheel', function() { setButtonState(); }); 
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); }); 

function setButtonState() { 
    setTimeout(function() { 
     var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length; 
     if(!sbw) { 
      arw.css('color', 'red'); 
     } else { 
      arw.css('color', 'white'); 
     } 
    }, 600); 
}

Quelle

2017-04-21 12:17:47 Pyromonk

Hinzufügen [dieser Link] (http://idangero.us/swiper/api/#.WPoRqfl96po) als Kommentar für zukünftige Referenz. Die Slider-API hat Callback-Methoden, die verwendet werden können, wenn jemand nicht herausfinden kann, wie genau es funktioniert (ich persönlich kann das nicht). – Pyromonk

können Sie andere Methoden verwenden, wie $(document).scroll(function(){

Below-Code ist nicht die Antwort, aber Sie können etwas wie das

var

$w = $(window).scroll(function(){ 
    if ($w.scrollTop() > targetOffset) { 
      // add css here 
    } 
    }

targetOffset 38,40 wäre versuchen.

Quelle

2017-04-21 08:48:44

Das Bildlaufereignis wird nur einmal nach dem Laden der Seite ausgelöst, daher funktioniert diese Lösung leider nicht. – Pyromonk

Element css ändern, wenn div spezifische Klasse hat

Antwort

Verwandte Themen