Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

sticky navigatiebalk met jQuery (Opgelost)

Thomas - 07/01/2014 15:33

Moderator

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(). Probeer het volgende knip- en plakvoorbeeld maar eens uit (wel zorgen dat het content-gedeelte hoger is dan je scherm uiteraard, en even scrollen natuurlijk...):

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="//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="//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>

Ik mis eigenlijk een jQuery (snippet) rubriek onder scripts

1 antwoord

Gesponsorde links

marten - 08/01/2014 08:55
Beheerder		Heb hem aangemaakt voor je, wil je hem verhuizen daar naar toe ?

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten