Een DIV dynamisch een position fixed geven

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jovank vank

jovank vank

06/02/2017 12:34:53
Quote Anchor link
Simpel gezegd heb ik 3 DIV's onder elkaar geplaatst. De header, een zoekbalk en de content. Scroll ik omhoog dan verdwijnen uiteraard de header en de zoekbalk en scroll ik door de content.
Nu zou ik eigenlijk graag willen dat de zoekbalk bovenin het scherm blijft staan.

Bijvoorbeeld bij Marktplaats werkt dat zo. Zodra de zoekbalk de bovenkant van het scherm raakt, krijgt hij de position fixed en blijft vervolgens staan, terwijl de content doorscrollt.

Ik heb er dagen op gezeten, maar het lukt mij niet de vinger er achter te krijgen.
Wie kan mij vertellen hoe je dat voor elkaar krijgt.
Gewijzigd op 06/02/2017 12:35:35 door Jovank vank
 
PHP hulp

PHP hulp

22/11/2024 07:57:47
 
Rob Heinz

Rob Heinz

06/02/2017 13:38:29
Quote Anchor link
Dit kun je makkelijk doen door een JS plugin te gebruiken of natuurlijk zelf even te maken met behulp van JQUERY.

Voorbeelden zijn:
http://stickyjs.com/

http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
 
Jovank vank

jovank vank

06/02/2017 14:19:55
Quote Anchor link
Hi Rob, bedankt voor je reactie.
Je oplossing werkt vast en zeker, maar ik heb zojuist ook een oplossing gevonden.
Voor de geïnteresseerden:
Ik heb de functie $(window).scroll(function() gebruikt en bepaal daarmee de positie van de scrollbar. In de gewenste positie, dus als de te fixeren DIV bovenaanstaat geef ik hem met de functie een .addclass. Die stelt de positie op 0px 0px en fixed. Is de positie van de scrollbar weer minder dan verwijder ik de addclass.
Werkt fantastisch.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.