Bei "scroll down" Menü animieren nur mit CSS möglich?

Ist es möglich rein in CSS ein oberes Menü zu animieren, wenn man nach unten scrollt?

Ich habe mit:

position: sticky;
top: 0;

zwar erreicht, dass das obere Menü erst etwas mit nach oben rutscht und dann am oberen Rand stehen bleibt.

Ich würde jedoch gern die Schriftgröße und die Lage in der Position

top: 0;

verändern und animieren. Gibt es da eine Möglichkeit nur in CSS?

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

CSS

05.09.2019, 04:09

Du kannst den Container zweimal herausrendern lassen. Der erste Container ist sticky, der zweite wird absolut nach oben positioniert und in der z-Ebene vor den ersten Container positioniert. Zudem kann man ihn individuell stylen (Schriftart, -größe u.ä.).

Wenn man nun also scrollt, wird der erste Container angezeigt. Wenn man wiederum oben angekommen ist, überdeckt der zweite Container den ersten.

Demo

Krabija

Fragesteller

05.09.2019, 12:19

Hallo, vielen Dank für deinen Vorschlag.

Ich hatte hier:

https://codemyui.com/sticky-navigation-jump-links-on-scroll/

so etwas ähnliches gefunden, was du glaube ich vorgeschlagen hast. Indem man mit unterschiedlichen Positionen hantiert.

Leider kann man für so ein Ereignis keine weiteren Animationen einbauen ohne auf JavaScript o.ä. zurückzugreifen. Denke ich.

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zur Frage

HTML / CSS scroll animation aber wie?

Hi, ich brauch eine Animation bei der man scrollt und ein div beginnt zu wachsen/zoomen nach einem Maximum soll es wieder kleiner werden und der nächste block wachsen usw. eine Grafik ist im Anhang. Ich brauch keinen fertigen Code eher einen Ansatz oder etwas vergleichbares.

...zur Frage

Wie erstellt man mit HTML und CSS so ein Menü?

Weiß jemand wie man das aufklappbare Menü mit HTML und CSS programmiert wird? wenn man weiter runter scrollt, wird diese Leiste dann oberhalb in dem weißen Kasten angezeigt.

https://www.kristinahoefler.de

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

CSS Code für permanenten Hintergrund?

Hi.

Ich arbeite für die Schule gerade an einem Webdesign-Projekt und wollte gerne meinen Hintergrund, den ich für die gesamte Website nutzen möchte, als permanentes Bild haben. Es soll quasi immer am gleichen Platz bleiben und sich nicht bewegen.

Allerdings ist jetzt der Fall, dass sich das Bild immer wieder wiederholt, was halt in meinem Fall einfach nicht gut aussieht.

Gibt es da irgendein Befehl, den ich irgendwo einbauen muss? Hab bisher alles probiert, aber entweder ist das Bild ganz weg oder wiederholt sich wie gesagt...

LG Jana

Für alle, die es brauchen, mein aktueleler Hintergrundcode in CSS:

background-image: url("img/hintergrund.png");

background-position: no-repeat sticky;

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Kreis koordinaten berechnen?

Ich lerne Grade html css und JS und habe einen Kreis aus bildern gemacht.

Dazu hab ich ein Koordinaten-system gezeichnet mir die rechte und obere Zahl markiert und mit einem Zirkel verbunden. Das muss doch leichter geht?!?!? Wie berechnet man das?

Css für Leute die es nicht kennen:

Alles ist in der Mitte angeordnet und kann mit Hilfe von "top" "left" und die anderen bewegt werden. Es fängt unten links an also bei top: -5 geht es fünf hoch und bei left: 6 geht es 6 nach rechts.

...zur Frage

Wie kann ich mit CSS die Position meines Menüs ändern?

Wie auf den Bildern zu sehen, habe ich zwei Probleme. Das Menü befindet sich am obersten Bildschirmrand - soll aber eigentlich am unteren Rand des schwarzweiß-banners positioniert werden. Des weiteren bekomme ich die weiße Box in der die Navigationspunkte sitzen nicht kleiner, sodass die Divider Striche auch noch zu hoch sitzen. Momentan ist das menü auch so eingestellt, dass es fest oben sitzt bis man runterscrollt und es am oberen bildschirmrand folgt. das kann auch gern so bleiben, mit ausnahme dass es eben erst ab der position am unteren bannerrand folgen soll. hoffe ist irgendwie klar was ich meine.

...zur Frage

Barrierefreiheit Google scroll-top-button?

Wenn ich meine Seite auf pagespeed.web.dev analysiere, wird mir dieses Problem "Schaltflächen haben keinen für Screenreader zugänglichen Namen" unter Barrierefreiheit angezeigt. Dabei geht es darum, dass ich einen scroll-top-button auf der Seite habe. Dieser hat üblicherweise keinen Text und scrollt lediglich bis ganz nach oben. Wie kann ich das Problem beheben, sodass mir das nicht mehr als Fehler bei Google angezeigt wird?

Die Seite ist mit Wordpress erstellt.

Hier der Code dazu:

body.home > div.jupiterx-site > div.jupiterx-corner-buttons > button.jupiterx-scroll-top

...zur Frage

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zur Frage

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zur Frage

HTML/JavaScript: Wieso scrollt er nach oben?

Hey,

ich wollte einen Scrolldown-Button machen und er scrollt nach oben. Wieso macht er das?

</section>
<section id="section03" class="demo">
  <h1>Scroll Down Button</h1>
  <a href="#section03"><span></span>Scroll</a>
</section>
<script>
  $(function() {
    $('a[href*=#]').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
      }, 500, 'linear');
    });
  });
</script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen