-
05-04-2012, 20:19 #1Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Verander div height bij scrollen dmv JQuery
Ik heb momenteel 2 divs, met in de 1ste div de navigatie:
In de header div zit een background-image van 500px hoog. Met bovenaan de navigatie. Wanneer je scrollt, wil ik dat de hoogte van de header div verkleind tot ongeveer 150px, maar de navigatie moet nog steeds zichtbaar ,vanonder, in die div staan.HTML Code:<div id="header"> <div id="navigation"> Hier zit een horizontaal menu in </div> </div> <div id="content"> content </div>
Wanneer je dan terug naar boven scrollt, wordt de header div weer groter.
Heeft iemand enig idee welke jquery functies ik hier het beste voor kan gebruiken ? Of iemand ooit dit al gemaakt ?
Thanks !no votes
-
-
06-04-2012, 15:04 #2Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
.css() lijkt me een goed begin. Zoiets zit natuurlijk niet standaard voorzien in JQuery, daar moet ge zelf een functie voor gaan uitschrijven. Kijk naar het resize event, de top offset en bereken daarmee hoe hoog uw headerdiv moet zijn en eventuele andere dingen.
no votes
-
06-04-2012, 15:46 #3Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
Een aanvulling hierop '.scroll()' .scroll() – jQuery API
-no votes
-
06-04-2012, 16:41 #4Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Err ja, 't scroll event natuurlijk, niet het resize event. My bad..
no votes
-
07-04-2012, 12:31 #5Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Iets als dit zou moeten werken veronderstel ik:
Dan kan je makkelijk in je CSS alles aanpassen (en dus ook alles van je navigation door .small #navigation te gebruiken)Code:var $j = jQuery.noConflict(); $j(document).ready(function () { var header = $j('#header'); $j(window).scroll(function () { if ($j(document).scrollTop() > 500) { header.addClass('small'); } else { header.removeClass('small'); } }); });no votes
-
07-04-2012, 15:14 #6Member
- Registered
- 22/06/10
- Location
- Muizen (Mechelen)
- Posts
- 286
- iTrader
- 4 (100%)
- Mentioned
- 0 Post(s)
Bedankt al voor jullie reacties.
Ik test het zo snel mogelijk uit.
Hier is een voorbeeld van hetgeen dat bedoel:
Chase happiness | Dave Gamache: Designer & Adventurer
Enkel moet bij mij het menu blijven staan en een deel van de header.no votes

