nicht angemeldet
TSHello Lukas,
ich habe mal 'was gebastelt. Da fallen zwar garantiert gleich wieder Einige mit nebensächlichen Verwässerungsvorschlägen (sic!) drüber her, aber das muss ich dann eben aushalten ;-P
Weitere Ideen:
- Du könntest ja jetzt mal nach den Transisions suchen.
- Und man könnte darüber nachdenken, ob man eine Static-Variable für "Shrinked" einführt, damit nicht bei jedem Scrollvorgang die setHeaderHeight()-Funktion angeworfen wird. Die wird ja garantiert noch fetter werden.
- Und man könnte die Hysterese auch automatisch berechnen lassen, damit man nachher nicht soviel ändern muss, wenn sich die Headerhöhe mal im CSS ändert.
Und wenn wir das dann hier nach und nach veröffentlichen, haben wir auch schon fast wieder einen Artikel fürs Wiki. Da müssen die Verbesserer dann natürlich noch vorher ran ;-)
<?php ### shrinking_header.php ### utf-8 ### ÄÖÜäöü
header('Content-Type: text/html; CharSet=utf-8');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Shrinking Header</title>
<script src="/jQuery.js"></script>
<script>
$(document).ready(
function()
{
function setHeaderHeight(height)
{
$( "header" ).height(height);
// weitere für Textgrößen, Farben etc.
}
$(window).scroll(
function()
{
$( "footer" ).text('DocHeight = ' + $(document).height() +', ScrollTop = ' + $(window).scrollTop() );
if($(window).scrollTop() > 200)
{
// deine Aktionen
setHeaderHeight(100);
// $( "section#Sec02" ).text('Hallo');
}
else if ($(window).scrollTop() < 120)
{
setHeaderHeight(200);
// $( "section#Sec02" ).text('Selber Hallo');
}
}
);
}
);
</script>
<style>
html, body {
width: 100%;
margin: 0;
font-family: "Century Gothic", Helvetica, Tahoma, sans-serif;
}
main {
width: 100%
margin: 0;
margin-top: 220px;
padding-bottom: 25pt;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 20pt;
height: 200px;
background-color: #AAAAAA;
}
section {
margin: 20pt;
padding: 15pt;
/* width: calc(100% - 70pt); */
height: 500px;
background-color: #ffffbb;
border: 1px solid #8080ff;
border-radius: 10pt;
-moz-border-radius: 10pt;
-webkit-border-radius: 10pt;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10pt;
padding: 5pt 20pt; /*top+bottom - left+right */
background-color: #FFA0A0;
border-top: 1px solid #808080;
}
</style
</head>
<body>
<header>
<h1>Shrinking Header</h1>
<p>Die Kunst nach Kunst auszusehen</p>
</header>
<main>
<section id="Sec01">
Nur zum Füllen
</section>
<section id="Sec02">
Nur zum Füllen
</section>
</main>
<footer>
Footer-Text
</footer>
<nav>
</nav>
</body>
</html>
Liebe Grüße
Tom S.
--
Es gibt nichts Gutes, außer man tut es
Es gibt nichts Gutes, außer man tut es
marctrix
Camping_RIDER
Gunnar Bittersmann
Matthias Apsel