sticky navigatiebalk

Auteur: Thomas - 10 januari 2014 - 11:45 - Gekeurd door: marten - Hits: 7192 - Aantal punten: 4.25 (2 stemmen)

Op deze site kwam ik een leuk effect tegen: als je naar beneden scrollt door een pagina blijft de navigatiebalk aan de bovenkant van je scherm plakken. Ik heb even in de broncode zitten neuzen en het was ontzettend makkelijk om dit effect te reproduceren door gebruikmaking van scroll() en scrollTop().

Het onderstaande knip- en plakvoorbeeld beschrijft het principe; wel zorgen dat het content-gedeelte hoger is dan je scherm uiteraard, en even scrollen natuurlijk...

Code:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sticky navigation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
<!--
html                    { height: 100%; margin: 0; padding: 0; }
body                    { height: 100%; margin: 0; padding: 0; }
div.wrapper             { margin: 0 auto; width: 850px; min-height: 100%; position: relative; background-color: #f0f0ff; }
div.header              { width: 850px; height: 100px; background-color: #ffd0d0; }
div.nav-wrapper         { min-height: 50px; } /* voor het tegengaan van het verspringen van #navigation */
div.navbox-1            { width: 850px; height: 25px; line-height: 25px; background-color: #d0ffd0; }
div.navbox-2            { width: 850px; height: 25px; line-height: 25px; background-color: #b0ffb0; }
div#navigation.sticky   { position: fixed; top: 0; z-index: 1; }
//-->
</style>
</head>

<body>
<div class="wrapper">
    <div class="header">
    </div>
    <div class="nav-wrapper">
        <div id="navigation">
            <div class="navbox-1">link 1 - link 2 - link 3</div>
            <div class="navbox-2">link 4 - link 5 - link 6</div>
        </div>
    </div>
    <div class="main">
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $(document).scroll(function(e) {
            if ($(document).scrollTop() > 100) {
                $('div#navigation').addClass('sticky');
            } else {
                $('div#navigation').removeClass('sticky');
            }
        });
    });
//]]>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sticky navigation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
<!--
html                    { height: 100%; margin: 0; padding: 0; }
body                    { height: 100%; margin: 0; padding: 0; }
div.wrapper             { margin: 0 auto; width: 850px; min-height: 100%; position: relative; background-color: #f0f0ff; }
div.header              { width: 850px; height: 100px; background-color: #ffd0d0; }
div.nav-wrapper         { min-height: 50px; } /* voor het tegengaan van het verspringen van #navigation */
div.navbox-1            { width: 850px; height: 25px; line-height: 25px; background-color: #d0ffd0; }
div.navbox-2            { width: 850px; height: 25px; line-height: 25px; background-color: #b0ffb0; }
div#navigation.sticky   { position: fixed; top: 0; z-index: 1; }
//-->
</style>
</head>
 
<body>
<div class="wrapper">
    <div class="header">
    </div>
    <div class="nav-wrapper">
        <div id="navigation">
            <div class="navbox-1">link 1 - link 2 - link 3</div>
            <div class="navbox-2">link 4 - link 5 - link 6</div>
        </div>
    </div>
    <div class="main">
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
        content<br />content<br />content<br />content<br />content<br />
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $(document).scroll(function(e) {
            if ($(document).scrollTop() > 100) {
                $('div#navigation').addClass('sticky');
            } else {
                $('div#navigation').removeClass('sticky');
            }
        });
    });
//]]>
</script>
</body>
</html>

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Geen reacties (0)