AgnusMacGyver
Neues Mitglied
Hallo zusammen,
ich habe hier ein Problem mit dem ich mich schon seit Stunden rumschlage und keine Lösung finde. Ihr könnt sicherlich helfen.
Aufbau
Die Webseite besteht aktuell aus einem header-Element, welches x Pixel vom oberen Bildschirmrand positioniert ist. In diesem befindet sich eine h1-Überschrift (Firmenname).
Das header-Element soll stets über die komplette Browserbreite verlaufen (width: 100%).
Unter dem 'header' befindet sich ein main-Element mit fester Breite, welches mit 'margin: 0 auto;' zentriert ist.
Aufgabe:
Wenn die Seite nach oben gescrollt wird, soll der 'header' samt Firmenname am oberen Bildschrimrand andocken und darunter soll das 'main'-Element nach oben fließen. So weit habe ich die Aufgabe mit JS gelöst.
Problem:
In der jetzigen Ausgangsituation (siehe Code unten) stimmt die vertikale Flucht des h1-Elements zu 'main' nicht mehr, sobald man die Browserbreite ändert.
Alternative:
Man setzt das 'header'-Element in den 'Wrapper', aber dann wird die Breite begrenzt -> keine Lösung!
Alternative 2:
Man setzt ausschließlich das h1-Element in den Wrapper, aber dann scrollt der Firmenname auch noch oben, was keine Lösung darstellt.
Vorab vielen Dank für eure Hilfe & Grüße,
Fritz
ich habe hier ein Problem mit dem ich mich schon seit Stunden rumschlage und keine Lösung finde. Ihr könnt sicherlich helfen.
Aufbau
Die Webseite besteht aktuell aus einem header-Element, welches x Pixel vom oberen Bildschirmrand positioniert ist. In diesem befindet sich eine h1-Überschrift (Firmenname).
Das header-Element soll stets über die komplette Browserbreite verlaufen (width: 100%).
Unter dem 'header' befindet sich ein main-Element mit fester Breite, welches mit 'margin: 0 auto;' zentriert ist.
Aufgabe:
Wenn die Seite nach oben gescrollt wird, soll der 'header' samt Firmenname am oberen Bildschrimrand andocken und darunter soll das 'main'-Element nach oben fließen. So weit habe ich die Aufgabe mit JS gelöst.
Problem:
In der jetzigen Ausgangsituation (siehe Code unten) stimmt die vertikale Flucht des h1-Elements zu 'main' nicht mehr, sobald man die Browserbreite ändert.
Alternative:
Man setzt das 'header'-Element in den 'Wrapper', aber dann wird die Breite begrenzt -> keine Lösung!
Alternative 2:
Man setzt ausschließlich das h1-Element in den Wrapper, aber dann scrollt der Firmenname auch noch oben, was keine Lösung darstellt.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Name der Website</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;}
html {
height: 100%;}
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
color: #fff;
background: grey;
min-width: 800px;}
#wrapper {
width: 1000px;
height: 2000px;
border: 1px white solid;
margin: 0 auto;}
header {
position: absolute;
margin-top: 70px;
height: 70px;
width: 100%;
background-color: #122ADF;
z-index: 0;}
.fixed {
position: fixed;
top: -70px;}
.ueberschrift h1{
position: absolute;
margin-left: 130px;
font-size: 2.5rem;
line-height: 4.2rem;
z-index:1;
}
main {
margin: 200px 0 0 50px;
width: 62.5%;
float: left;
text-align:justify;}
</style>
<script>
$(document).ready(function() {
var top = $('header').offset().top;
$(window).scroll(function() {
if($(this).scrollTop() > top) {
$('header').addClass('fixed');
} else {
$('header').removeClass('fixed');
}
});
});
</script>
</head>
<body>
<header><div class="ueberschrift"><h1>Firmenname</h1></div></header>
<div id="wrapper">
<main>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
<p>Lorem ipsum dolor sic amet.</p>
</main>
</div>
</body>
</html>Vorab vielen Dank für eure Hilfe & Grüße,
Fritz
