Een DIV dynamisch een position fixed geven
jovank vank
06/02/2017 12:34:53Simpel 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.
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
22/11/2024 07:57:47Rob Heinz
06/02/2017 13:38:29Dit 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/
Voorbeelden zijn:
http://stickyjs.com/
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
jovank vank
06/02/2017 14:19:55Hi 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.
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.