Javascript Code wird nur einmal ausgeführt

[Gurkensaft1]

Bin neu bei diesem Thema...ich denke also, dass da sehr viel falsch sein wird aber deswegen frage ich ja
Ich wollte ein div nennen wir es mal "div1" bei beim runterscrollen einblenden lassen und beim raufscrollen wieder ausblenden. Nun hab ich es geschafft dass es beim raufscrollen langsam ausgebelndet wird, aber beim runterscrollen ohne jegliche Animation erscheint.
Das ist aber nur das geringste Problem. Und zwar wird es nur einmal ausgeführt. Also wenn ich die Seite aktualisiere und dann runterscrolle erscheint div1, aber wenn ich wieder raufscrolle verschwindet es und es kommt bei weiterem runterscrollen auch nicht wieder...

.div1 {
            height: 365px;
            width: 400px;
            background-color: var(--bg-main);
            border-radius: 30px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            bottom: 305px;
            left: 550px;
            display: none;
            user-select: none;
            background-color: black;
            opacity: 1;
            transition: all 1.5s ease-in-out;
        }

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.documentElement.scrollTop > 150) {
      const calendar = document.querySelector(".calendar");

      calendar.style.display = "block";
    
}
  else {
    const calendar = document.querySelector(".calendar");

    calendar.style.opacity = "0";
  }
}

 

[Oliver77]

Du blendest es mit opacity aus, aber nicht wieder ein, wenn ich das richtig verstehe...

 

[basti1012]

Ich wollte ein div nennen wir es mal "div1"

Warum nicht gleich calendar ?
Das könnte gleich Missverständnisse beseitigen (weil CSS nicht zu JS passt so)

Du solltest in der CSS das opacity auf 0 stellen und das display:none; löschen.
Dann, wie Oliver sagte, nur opacity zum ein und ausblenden nutzen.

Dann würde ich addEventlistener nutzen.
Browser schonend solltest du das querySelector aus dem Event herausnehmen, weil bei jedem Pixel den du Scrollst, sucht der Browser das Element.
Sind nur Kleinigkeiten, aber muss ja nicht, sein, wenn es auch ohne geht.

In deine CSS hast du 2-mal Background-color stehen, das erste hat so keine Funktion (oder werden CSS Variablen bevorzugt? Glaube nicht)