Div ab bestimmte wieder ausblenden.

[Kent94]

Guten Tag,

habe eine Frage nach stundenlanger suche im Netz... Stellt sich mir die Frage ob das möglich sei.

und zwar möchte ich das mein Logo auf der Website angezeigt wird sobald ich runter schrolle erscheint ein neues div mit ein anderes Logo (Das das logo kommt habe ich bereits geschafft)

        $(window).scroll(function(){
          if( $(this).scrollTop() > 50){
            $('.logo_ben').fadeIn( "slow", "linear" );
          } else {
            $('.logo_ben').fadeOut( "slow", "linear" );
          }
        });

wie schaffe ich es nun das mein erstes div ab 50 scrolltop 50 ausgeblendet wird ?

 

[Jan-Frederik Stieler]

Hallo,
indem du das einfach mit in die if-Abfrage rein nimmst.

 $(window).scroll(function(){
          if( $(this).scrollTop() > 50){
            $('.logo_ben').fadeIn( "slow", "linear" );
            $('.logo_alt').fadeOut( "slow", "linear" );
          } else {
            $('.logo_ben').fadeOut( "slow", "linear" );
            $('.logo_alt').fadeIn( "slow", "linear" );
          }
        });

Grüße,
Jan

PS: Bitte postet demnächst Javascriptfragen im Javascript- und nicht im Java-Froum. Javascript ist nicht Java!
Auch bitte ich darum wenn du Code postets diesen doch bitte in Codeblocks zu schreiben. Danke!

 

[Kent94]

Hallo,

vielen Dank. Kurze frage noch habe ich grade nämlich auch ausgetestet das Logo zu verkleinern klappt auch soweit super allerdings wenn ich hoch scrolle bleibt das logo klein hast du evtl eine Idee ?

Code: JAVASCRIPT

<script type="text/javascript">
(function($){
$(window).scroll(function(){
if($(window).scrollTop() >= 100)
  $('body').addClass('over300');
});
})(jQuery);
</script>

Code: CSS

.deinLogoContainer {
    position: relative;
    top: -5px;
width: 200px;
transition: width .5s;
}
.deinLogoContainer img {
width: 100%;
height: auto;
}
.over300 .deinLogoContainer {
width: 150px;
}

MfG.

 

[Jan-Frederik Stieler]

Hi,
du müsstest die Klasse beim hochscrollen wieder entfrenen.

.removeClass();

https://api.jquery.com/removeclass/

Grüße

PS: Wir haben auch Codeblöcke für javascript und CSS eingerichtet. Dann wird der Code auch farbig ausgezeichnet .

 

[Kent94]

Okay wie genau mach ich das mit Removeclass ? bin in Javascript eher ein Neuling... muss ich das mit im Javascript code einfügen oder muss ich in der div setzung das rein setzen ? Evtl könntest du mir da ja ein Beispiel geben wäre sehr nett.

 

[SpiceLab]

PS: Wir haben auch Codeblöcke für javascript und CSS eingerichtet. Dann wird der Code auch farbig ausgezeichnet .

[code=css][/code]
[code=javascript][/code]

usw... https://www.tutorials.de/help/bb-codes#codetag

 

[Kent94]

[code=css][/code]
[code=javascript][/code]

usw... https://www.tutorials.de/help/bb-codes#codetag

Frage wahr auf Removeclass bezogen Das mit den Farbig setzen von Codes habe ich mir grade hier im Board angeschaut!

 

[SpiceLab]

Frage wahr auf Removeclass bezogen Das mit den Farbig setzen von Codes habe ich mir grade hier im Board angeschaut!

Mein Beitrag bezieht sich auf Jans Tipp (siehe Zitat)

Und zu diesem Zeitpunkt existierte deine Rückfrage bzgl. .removeClass() noch nicht!

Man beachte meine einminütige Verspätung

 

[Jan-Frederik Stieler]

Hi,
also da .removeClass(); eine jQuery Methode ist muss das natürlich ins javascript.
Nun musst du dir überlegen wo du welche Klasse entfernen willst. Also als Selektor wählst du dann $('body') mit der Methode .removeClass('over300');

(function($){
  $(window).scroll(function(){
    if($(window).scrollTop() >= 100){
      $('body').addClass('over300');
    }
    else {
      $('body').removeClass('over300');
    }
  });
})(jQuery);