Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

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?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

iQa1x

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

22.01.2020, 15:05

https://pixelflips.com/blog/anchor-links-with-a-fixed-header

Du kannst auch mal versuchen, im css mit body { scroll-margin-top: 100px; } zu experimentieren, aber diese CSS-Eigenschaft kann noch nicht jeder Browser.

Bei beiden Versionen hast du das Problem, das du eine feste Höhe des Bereichs (in px) brauchst. Auslesen und dynamisch setzen braucht JS.

Woher ich das weiß:Studium / Ausbildung – Informatiker

iQa1x

22.01.2020, 16:14

Evtl. kann es auch sein, das das scroll-margin-top: 100px; an html statt an body dran muss...

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

22.01.2020, 15:13

Warum ist der Header denn nicht gleich in der Section mit drin? Wenn der Aufbau in dieser Art ist, dann ist der Header auch sichtbar:

<section id="home">
  <header>…</header>
  …
</section>

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

User339312

Fragesteller

22.01.2020, 17:15

Der Header ist fixiert und stellt den Header der Website dar.

Die Website hat mehrere Sektoren.

Nutzer937564

22.01.2020, 15:43

Soweit ich weiß ist CSS leider noch nicht so weit. Könntest aber mal in den Eigenschaften von CSS3 nachschauen. Ansonsten würde ich sowas mit jQuery/JavaScript lösen.

Ähnliche Fragen

HTML/CSS/JS Sections einfliegen lassen?

Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.

...zur Frage

Bild smooth kleiner machen?

Weiß irgendwer wie man in CSS, JavaScript, HTML ein Bild in den header einfügt und wenn man dann runterscrollt, das Bild dann smooth kleiner wird? Ich weiß nicht wie ich es erklären soll...Also da ist ein Logo im Header und wenn man runterscrollt bleibt der Header und das Logo an der selben Stelle aber das Logo wird smooth verkleinert...

Beispiel: goldener-fisch.at

...zur Frage

Wie kann ich ein Bild (position:fixed) erst ab einer bestimmten Stelle einblenden?

Hi,
ich habe ein normales Bild in meinen HTML Code eingebunden. Vor und hinter dem Bild habe ich jeweils eine section mit Text drin. Das Bild ist in CSS auf position:fixed; gesetzt, damit es immer zu sehen ist. Das Problem ist jetzt, dass das Bild nicht wirklich immer zu sehen sein soll. Es soll erst eingeblendet werden, wenn man von der ersten section auf die zweite scrollt (unter der zweiten section sollen noch weitere folgen, da soll das Bild auch immer zu sehen sein).
Ich habe versucht, der ersten section einen höheren z-index zu geben als dem Bild, damit sie an der Stelle über dem Bild liegt, aber das Bild ist trotzdem zu sehen. Hat jemand eine andere Idee? Gibt es eine CSS Lösung? Oder JQuery?

...zur Frage

CSS Überschrift: Position senken?

Hallo, ich versuche mich zurzeit an einer CSS-Challenge. Leider weiß ich nicht, wie ich die Position der Überschrift (Learning is not a privilege...) ändern kann. Sie steht viel zu weit oben. Mit height kann ich hier nicht arbeiten, weil das Einfluss auf die unteren Blöcke hat und sich dann alles nach unten senkt. Zurzeit sieht der Code für die Überschrift wie folgt aus:

#header p {margin-left: 400px; font-size: 40px; }

...zur Frage

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zur Frage

Sticky navbar mit Header?

Ich will eine Webseite programmieren (mit CSS, HTML und JavaScript) , bei der ganz oben die Navigation unter dem Header bzw Logo ist. Aber wenn man runterscrollt, soll die navbar oben fest sein. Falls ihr versteht, was ich meine :D

Habe schon die Navbar, den Header, also die ganze Webseite gebaut.

Über Tipps und Hilfe würde ich mich freuen.

...zur Frage

CSS: Warum werden bei meiner ul-Liste die Bullet-Points nicht angezeigt?

Hallöchen,

wie schon im Titel steht, werden bei meiner ul-Liste die Bullet-Points nicht angezeigt. Höchstwahrscheinlich liegt es an der CSS-Datei, da ohne sie die Punkte sichtbar sind.

In anderen Foren habe ich meistens gelesen, dass man das Problem mit padding-left oder margin-left lösen kann. Hat aber bei mir nicht funktioniert.

Woran liegt es dann?

Falls ihr den kompletten Quelltext sehen wollt hier die URL:

https://meisterbetrieb-mathias-schiller.de/

Ansonsten hier die relevanten Quellcode-Ausschnitte:

Übrigens: Ich hatte auch die Einstellung "list-style-position: inside;" ausprobiert, da konnte man die Punkte sehen. Allerdings sieht das aber nicht schön aus.

In der HTML-Datei:
<section>
  <ul>
    <li>1. Punkt</li>
    <li>2. Punkt</li>
  </ul>  

</section>

In der CSS-Datei: section ul { padding-left: 3em; }

section li { padding-bottom: 0.5em; width: 95%; }

...zur Frage

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zur Frage

Wie erstelle ich einen coolen Header, bzw. ein cooles Menü bei CSS/HTML?

Hallo Community,

Ich habe momentan in der Schule das Thema CSS und HTML. Wir müssen nun alle eine eigene Website erstellen. Ich hab mich dann mal auf die Suche nach ein paar coolen Websites gemacht, um mich dabei inspirieren zu lassen. Eine bestimmte Seite hat es mir auch sehr angetan, vor allem der Header, bzw. das Menü oben. Nun wollte ich fragen, wie ich so ein Menü (muss nicht so krass sein) erstellen kann? Muss ich da schon mit Javascript arbeiten oder reicht CSS/HTML aus?

Hier der Link zu der Website: http://rosewatermv.com/

Vielen Dank schon im Voraus.

...zur Frage

Problem in CSS mit fixierter Position?

Hallo liebe Ratgeber!

Ich arbeite gerade an einem kleinen Projekt in HTML. Dazu habe ich unter anderem einen Header-Bereich, welcher beim herunterscrollen stets weiter angezeigt werden soll. Ich habe ihm also die CSS EIgenschaft position: fixed verpasst, welche sich eigentlich nicht wirklich von position: relative unterscheidet, außer dass das Element nun fixiert wird. Als ich jedoch nun fixed statt relative verwendet habe, hat der Header Bereich ein Abstand nach oben bekommen. Zu Testzwecken habe ich außerhalb des Header-Bereichs eine lose Überschrift angeordnet. Diese erschien allerdings nicht wie gewollt unter dem Header-Bereich, sondern verschwand in ihm, als würde es den Header-Bereich nicht geben.

Hier mein Problem

Der Header-Bereich bekommt trotz margin:0 einen Abstand nach oben hin, eine darunter gesetzte Überschrift h2 verschwindet darin.

Wer kann mir bei meinem Problem ein wenig weiterhelfen? Ich möchte, dass der Header oben bleibt und alle folgenden Elemente auch unter dem Header angezeigt werden.

Danke im Voraus!

LG Korbi

...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

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...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

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

Was möchtest Du wissen?

Deine Frage stellen