Opacity Effekt beim scrollen

tino · 1. Februar 2021

hallo,

eine Frage, ich lasse beim scrollen meinen fixed-header stehen und möchte dazu links oben mein logo anzeigen, das geht,

nun möchte ich eine transition von opacity 0.2 bis 1.0.

das js-script sieht so aus:

Code

$(window).scroll(function(){
        if ($(window).scrollTop() >= 130) {
              $('header').addClass('shadow-header');
              document.getElementById("logo").style.visibility= "visible" ;
              var element = document.getElementById('logo');
              element.style.opacity = "1.0";
        }
        else {
              $('header').removeClass('shadow-header');
              document.getElementById("logo").style.visibility= "hidden" ;
        }
  });

Alles anzeigen

logo wird angezeigt , aber noch mit 0.2 wie im css.

das css des "logo":

Code

.logo {
  visibility: hidden;
  margin-left: 20px;
  margin-right: -200px;
  margin-top:  -20px;
  height: 60px;
  width: 200px;
  background-color: #FFFFFF;
  opacity: 0.2;
  transition: opacity 1.6s;
}

Alles anzeigen

kann mir jemand helfen,

ich habe auch schon :

Code

var element = document.getElementById("logo");

bzw:

document.getElementById("logo").setAttribute("style","opacity:1.0");

getestet, es ist immer in 0.2 und nix passiert.

danke euch schon mal

Tino

basti1012 · 1. Februar 2021

Frage,warum so

Code

document.getElementById("logo").style.visibility= "visible" ;
              var element = document.getElementById('logo');
              element.style.opacity = "1.0";

und nicht so

Code

var ele_log=document.getElementById("logo")
      ele_log.style.visibility= "visible" ;
      ele_log.style.opacity = "1.0";

öder so

Code

var ele_log=document.getElementById("logo")
    ele_log.style="visibility:visible;opacity = 1.0";

Es wäre schön, wenn du mal dein HTML zeigst, weil du mal Class Logo benutzt und mal ID Logo.

Was davon richtig ist, kann man ohne HTML kaum erkennen.

Wenn das HTML passt, könnte man das vielleicht auch nur mit add und remove class machen, das style Logo Gedöns könnte dann weg

tino · 1. Februar 2021

hallo,

also deine beiden vorschläge haben keine auswirkung, liegt der fehler nicht eher in dem css für das logo in meiner css (zeile 9 und 10)

es wird immer noch mit opacity 0.2 angezeigt.

das html siehr so aus:

Code

<header>
        <a href="index.php"><img src="bilder/keeplifesimple.jpg"></a>
        <nav id="design_desktop">
          <div class="logo">
                     <img alt="" src="bilder/keeplifesimple-klein.jpg">
          </div>
          <ul class="nav-links2">
                <li><a href="index.php">Startseite</a></li>
                <li><a href="archiv.php">Archiv</a></li>
                <li><a href="galerie.php">Galerie</a></li>
                <li><a href="laender.php">Länder</a></li>
                <li><a href="artikel.php">Artikel / Blog</a></li>
                <li><a href="uns.php">Über mich</a></li>
                <li><a href="traveling-stones/traveling-stones.php">Traveling Stones</a></li>
                <li><a href="kontakt.php">Kontakt</a></li>
          </ul>
        </nav>
  </header>

Alles anzeigen

achso und das eine id="logo" war etwas von damals, hat keine bedeutung mehr

gruss

Tino

tino · 1. Februar 2021

hallo nochmal,

bevor du dich mehr bemühst, ich habe es irgendwie hinbekommen, es lag wohl doch an den beiden "logo", habe die class="logo" jetzt umbenannt.

irgendwo wurde von damals noch was ausgelesen .

danke dir

gruss Tino

basti1012 · 2. Februar 2021

Das ist schön, dass du es selber hinbekommen hast.

Id's und Class's wurden schon öfters verwechselt, das ist bestimmt jeden schon mal passiert.

PS:

Du benutzt ja Jquery und Vanilla JS.

Schöner ist es wenn man bei eins bleibt und nicht misch masch macht.

Das

JavaScript

document.getElementById("logo").style.visibility= "visible" ;
              var element = document.getElementById('logo');
              element.style.opacity = "1.0";

könnte dann so aussehen

JavaScript

$("#logo").css({
    visibility:'visible',
    opacity:1
});

tino · 3. Februar 2021

ok,

danke auch dafür, sowas wusste ich nicht.

es ist halt bei mir alles try and error (meist error) und freuen wenn es geht, ein guter programmierstil ist etwas anderes.

gruss Tino

ps. kann ich dich nicht einmal einen tag in echt ausleihen und alle fragen klären

basti1012 · 3. Februar 2021

Zitat von tino

ps. kann ich dich nicht einmal einen tag in echt ausleihen und alle fragen klären

Ich weiß auch nicht alles und beim guten Programmierstil bin ich auch nicht gerade das beste Beispiel.

Du kannst aber bei Fragen jederzeit ein Beitrag erstellen, dafür ist das Forum ja da.

Opacity Effekt beim scrollen

Jetzt mitmachen!

Teilen