Archief - Verander div height bij scrollen dmv JQuery

m

meuh

Legacy Member

• 5 apr 2012

• #1

Ik heb momenteel 2 divs, met in de 1ste div de navigatie:

HTML:

<div id="header">
  <div id="navigation">
   Hier zit een horizontaal menu in
  </div>
</div>

<div id="content">
 content
</div>

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.
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 !

Z

Zero Grav

Legacy Member

• 6 apr 2012

• #2

.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.

D

Dieterg

Legacy Member

• 6 apr 2012

• #3

Zero Grav zei:

.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.

Klik om te vergroten...

Een aanvulling hierop '.scroll()' .scroll() – jQuery API

Z

Zero Grav

Legacy Member

• 6 apr 2012

• #4

Err ja, 't scroll event natuurlijk, niet het resize event. My bad..

-

-BVR-

Legacy Member

• 7 apr 2012

• #5

Iets als dit zou moeten werken veronderstel ik:

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');
        }		
    });
});

Dan kan je makkelijk in je CSS alles aanpassen (en dus ook alles van je navigation door .small #navigation te gebruiken)

m

meuh

Legacy Member

• 7 apr 2012

• #6

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.