1. #1

    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:

    HTML Code:
    <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 !
    no votes  

  2. #2
    Zero Grav's Avatar
    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  

  3. #3
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    .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.
    Een aanvulling hierop '.scroll()' .scroll() – jQuery API
    -
    no votes  

  4. #4
    Zero Grav's Avatar
    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  

  5. #5

    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:
    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)
    no votes  

  6. #6

    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in