WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wie programmiert man ein fixierten Header Bereich für die eigene Webseite?

von | Apr 16, 2015 | Technik | 0 Kommentare

Schlagwörter: CSS - featured - HTML - Programmieren

Ich werde immer wieder gefragt wie man denn so einen fixierten Header Bereich programmieren tut. Diese Technik sieht man heute fast überall, da sie sehr einfach zu programmieren ist und auch sehr effektvoll ist.

Heute möchte ich euch mal ganz kurz Zeigen, wie so ein fixierter Header genau funktioniert. Und zwar mit ein wenig CSS und HTML sowie unter Mithilfe von jQuery ist es wirklich einfach sowas zu machen.

Als erstes öffnet ihr ein HTML File, danach baut ihr den ganzen Standardinhalt ein head/ body usw…

Danach bindet ihr das jQuery ein – da reicht das jquery.min.js

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Danach müsst ihr kurz noch ein klein wenig Javascript einbauen, damit jQuery hier seine Arbeit tun kann:

1
2
3
4
5
6
7
8
9
10
11
<script>
 
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>

Nun definiert ihr nach dem Start des Body Tag den Headerbereich. Darin wird dann der ganze fixierte Headerbereich definiert.

1
<header><h1>Der fixierte Header-Bereich</h1></header>

Danach müsst ihr euch nur noch um das aussehen, des fixierten Headerbereich kümmern, dafür einfach CSS nehmen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
header{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
 
        header.sticky {
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }

Vergisst nicht die Web Kit Transition auch einzufügen, da ist nämlich der Befehl der Verkleinerungsanimation

In meinem Beispiel habe ich noch Google Font eingebunden, damit ich ein wenig mit der Schrift spielen kann. Hier seht ihr nun den ganzen Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
    <title>fixierter Header</title>
 
    <!-- import Google font -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
 
    <style>
 
        /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
 
 
        header{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
 
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
 
        header.sticky {
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }
 
    </style>
 
</head>
<body>
 
<!-- our markup -->
<header><h1>Der fixierte Header-Bereich</h1></header>
 
<!-- an image for demonstration purposes -->
<img src="large-image.jpg" width="782" height="2000" alt="Big Image"/>
 
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
<!-- write script to toggle class on scroll -->
<script>
 
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});
</script>
</body>
</html>

Fazit:

Wie ihr sehen könnt, ist es wirklich keine Hexerei mehr sowas zu programmieren.

Hier könnt ihr nun das Ganze noch live sehen – DEMO

Ich hoffe diese keine Anleitung hilft euch bei eurem nächsten Projekt





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert