Een DIV dynamisch een position fixed geven

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior PHP Developer Energy Services Symfony

Medior PHP Developer Energy Services Symfony Wat ga je doen als Medior PHP Developer? Als Medior PHP Developer uit de omgeving Rotterdam, ga jij werken aan een real-time energievoorziening webportal voor in de agrarische sector. De webportal ontzorgt klanten 24/7 volautomatische aansturing van warmtekrachtkoppeling, warmtepompen en netinkoop. Dit op basis van actuele APX in-en verkoopverplichtingen en onbalansmarktprijzen. Deze webportal levert 5 minuten near-time (bron) meetdata, automatisch ingelezen marktprijzen gas en elektriciteit en doorlopend near-time (op kwartierbasis) geactualiseerde financiële en technische performance rapportages (waaronder rookgasreiniging raakgascondensor monitoring). Hiermee bied jij een "energiedashboard" met alle relevante parameters om optimale economische en technische

Bekijk vacature »

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

26/03/2019 02:17:44
 
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.