Hoe Position fixed te beperken tot één DIV element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jovank vank

jovank vank

11/01/2019 14:30:55
Quote Anchor link
Ik heb een div a met position: fixed. Deze div a valt zelf ook weer binnen een div b.
Als ik nu naar beneden scroll blijft div a keurig staan. Echter kom ik aan bij de footer dan schuift hij ook dáárover heen. Dat wil ik niet.
Met andere woorden ik zou willen dat als div a de onderzijde bereikt van div b, dat hij dan niet meer fixed is, maar weer verder mee omhoog schuift.
Kan iemand mij uit de brand helpen?
 
PHP hulp

PHP hulp

28/03/2024 11:21:42
 
Rob Doemaarwat

Rob Doemaarwat

11/01/2019 14:43:02
Quote Anchor link
Is position: sticky wat je zoekt?
 
Jovank vank

jovank vank

11/01/2019 15:07:29
Quote Anchor link
Sticky is feitelijk ook een position fixed, maar dan op een bepaalde plaats.
Het gaat er hier om dat als de onderzijde van het omvattende div element wordt bereikt de fixed ahw wordt opgeheven.
 
Thomas van den Heuvel

Thomas van den Heuvel

11/01/2019 15:35:05
Quote Anchor link
Google "css fixed element within container", eerste resultaat.

fixed haalt elementen uit de flow, maar tegenwoordig is het blijkbaar wel (tot op zekere hoogte, pun intended :p) mogelijk om deze relatief ten opzichte van iets te positioneren.

En als dit niet op te lossen valt met een 100% CSS oplossing is daar altijd nog JavaScript.
 
Jovank vank

jovank vank

30/01/2019 14:07:55
Quote Anchor link
Sticky blijkt inderdaad de oplossing.

Maar toen bleek het volgende probleem: als de div korter is dan de div ernaast en je scrollt naar benenden dan scrollt hij op enig moment toch mee naar boven en verdwijnt hij. Wat er dus ook nog moet gebeuren is dat de betreffende div, als die naast andere divs staat, even lang moet zijn als de langste div.
Daar zijn ingewikkelde oplossingen voor. Ik heb een makkelijke gevonden door de omvattende div position:relative; te geven en de betreffende div position:absolute; bottom: 0px; right: 0px; en height: 100%;
werkt perfect.

Thx
 
Thomas van den Heuvel

Thomas van den Heuvel

30/01/2019 17:01:59
Quote Anchor link
Quote:
Wat er dus ook nog moet gebeuren is dat de betreffende div, als die naast andere divs staat, even lang moet zijn als de langste div.

Dit een ander specifiek en redelijk bekend CSS-probleem, die ook weer een andere oplossing heeft inderdaad.
 
Rob Doemaarwat

Rob Doemaarwat

30/01/2019 19:15:13
Quote Anchor link
Thomas van den Heuvel op 30/01/2019 17:01:59:
Dit een ander specifiek en redelijk bekend CSS-probleem, die ook weer een andere oplossing heeft inderdaad.

Maar: negeer alles van voor 2017 -> flexbox!
 



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.