Opgelost positieprobleem headroom.js

nuet

Ik probeer de hele navbar scrollable te maken met ease in - out vlg dit principe: http://wicky.nillia.ms/headroom.js/
Ik heb hem nu op het subdomein voor te testen en ik loop tegen het probleem aan dat de container naar boven schiet als ik die header een position fixed mee geef.
forum.webprofis.nl/
Kijk even in de console naar:

<header id="header" class="header slide slide--reset headroom--top">

Zodra ik de postion fixed verwijder dan schuift de container weer naar beneden.
Ik heb al geprobeerd de container een margin-top te geven maar dan gaat de header vrolijk mee wat niet moet..kom hier ff niet uit

fabian

wat is de css van de header en van de andere classes? Ik zelf heb dit probleem best vaak gehad, maar het lukt bij mijn eigen scripts vaak om die fout eruit te halen..

ReneV

Wat wil je precies maken?

Als je bv. je navbar fixed wilt, dan geef je de navbar bijvoorbeeld een max-height: 70px;
Tevens zet je in de nav: navbar-fixed-top
Vergeet niet in de body padding-top: 80px te vermelden.

Of bedoel je iets anders ?

In je subdomein zie ik ook header nav ..... /nav /header die header is hier niet van toepassing.

nuet

ik was hiermee aan het experimenteren Rene, maar ik kreeg het niet spits om dat in te bouwen. De container schoof onder de header als die header een posiion fixed kreeg
http://wicky.nillia.ms/headroom.js/

ReneV

Haal die header weg, geef nav de class navbar-fixed-top en in je css zet je body op padding-top op bv 80px.

Waarom extra javascripts gebruiken terwijl het standaard in bootstrap css staat.

ReneV

Waarom wordt er trouwens voor mobile responsive een extra theme geladen?

Deze standaard vanilla bootstrap Thieme is toch responsive voor iedere screen resolutie.

nuet

ja als ik dat doe Rene, dan staat die navbar volledig op fixed. Maar als je die headroom.js bekijkt http://wicky.nillia.ms/headroom.js/ ;
het principe hiervan: scroll je naar beneden dan verdwijnt de header bovenaan
En alsj e ergens helemaal onderaan zit op de pagina en je scrollt snel een stuk naar boven dan komt die header weer terug in beeld, ongeacht op welke hoogte je zit

Wat betreft die mobile theme: bootstrap dat ik als theme heb gekozen is idd volledig responsive. Maar je kunt ook andere themes kiezen die niet volledig responsive zijn. Dan slaat ie bij beplaade schermegroottes automatisch over op die mobile theme. Denk dat dat een soort van fall back is voor de niet responsive themes

nuet

Is gelukt! ik zat de hele tijd met die container te klooien maar die padding-top moest idd op de body komen.
Nu doet ie het zoals de bedoeling is: forum.webprofis.nl/
Scroll maar helemaal naar beneden; vervolgens scroll terug naar boven (wel snel) en de header valt gedurende de scroll al terug naar beneden. Dat was ook de bedoeling

ReneV

Uiteraard padding op body, anders valt je container onder de navbar en heb je problemen met z-index.
tevens als je vaker container gebruikt krijg je overal die padding.

Maar ik zie geen verschil in FF op subdomein.

nuet

ReneV schreef:: Maar ik zie geen verschil in FF op subdomein.

Ik gebruik ook FF en zie wel verschil; scroll naar beneden op de topic pagina en de header verdwijnt bovenaan (navbar).
Ben je nu helemaal onderaan de pagina; scroll dan naar boven en de header komt beneden vallen

ReneV

ff harde refresh en inderdaad werkt.

denk doe je even het menu aanpassen en ja hoor zoals voorheen.
waarom verneukt men bootstrap terwijl ze zelf een custom aanmaken?

in plaats dat ze bootstrap laten zoals die is en dan alles in de custom aanpassen, nee gaat men in bootstrap alles aanpassen waardoor het niet 123 gemaakt is.
lekker als je een update wilt gaat uitvoeren.

pfff, wordt dus weer zoeken enz.