Ik heb een probleempje. Ik ben bezig met een single-page website, en ik heb qua layout ongeveer dit:
Het scrollen naar verschillende sections gaat prima, en met wat jquery lukt dat ook wel animated, maar ik heb een vraag waar ik echt niet uitkom. Ik wil dat als ik naar een bepaalde section scroll, het menu als het ware tegen de bovenkant van het scherm wordt vastgeplakt, zodat je altijd direct naar andere sections kan. Ook als je scrollt wil ik dat het menu tegen de bovenkant van het scherm blijft staan, totdat we weer bij de header komen, dan moet ie naar z'n oorspronkelijke plek.
Ik heb me al suf gegoogled, maar ik heb werkelijk waar geen idee hoe ik dat handig kan doen. HTML code zou ongeveer dit moeten zijn:
[code=HTML]
header>
<h1>Hey! This is a nice test</h1>
<div class="menu">
<ul>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
</ul>
</div>
</header>
<section id="sec1">
<p>blah</p>
</section>
<section id="sec2">
<p>blah</p>
</section>
<section id="sec3">
<p>blah</p>
</section>
[/HTML]
Ik heb verder even twee plaatjes (Even klikken voor groot beeld!) gemaakt van hoe het eruit zou moeten zien, de eerste is standaard, als je de pagina bekijkt, op het tweede plaatje is er naar beneden gescrolled en is het menu mee gescrolled:
Ik hoop dat jullie het een beetje begrijpen, en dat iemand weet hoe ik dit kan aanpakken. Zelf kom ik er namelijk niet uit...
code:
1
2
3
4
5
6
| -header --title --menu -section 1 -section 2 -section n |
Het scrollen naar verschillende sections gaat prima, en met wat jquery lukt dat ook wel animated, maar ik heb een vraag waar ik echt niet uitkom. Ik wil dat als ik naar een bepaalde section scroll, het menu als het ware tegen de bovenkant van het scherm wordt vastgeplakt, zodat je altijd direct naar andere sections kan. Ook als je scrollt wil ik dat het menu tegen de bovenkant van het scherm blijft staan, totdat we weer bij de header komen, dan moet ie naar z'n oorspronkelijke plek.
Ik heb me al suf gegoogled, maar ik heb werkelijk waar geen idee hoe ik dat handig kan doen. HTML code zou ongeveer dit moeten zijn:
[code=HTML]
header>
<h1>Hey! This is a nice test</h1>
<div class="menu">
<ul>
<li><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
</ul>
</div>
</header>
<section id="sec1">
<p>blah</p>
</section>
<section id="sec2">
<p>blah</p>
</section>
<section id="sec3">
<p>blah</p>
</section>
[/HTML]
Ik heb verder even twee plaatjes (Even klikken voor groot beeld!) gemaakt van hoe het eruit zou moeten zien, de eerste is standaard, als je de pagina bekijkt, op het tweede plaatje is er naar beneden gescrolled en is het menu mee gescrolled:
Ik hoop dat jullie het een beetje begrijpen, en dat iemand weet hoe ik dit kan aanpakken. Zelf kom ik er namelijk niet uit...
/u/155568/usericon.png?f=community)
