[HTML/CSS/Jquery] On page scroll

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • Beatboxx
  • Registratie: April 2010
  • Laatst online: 26-10-2022

Beatboxx

Certified n00b

Topicstarter
Ik heb een probleempje. Ik ben bezig met een single-page website, en ik heb qua layout ongeveer dit:

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:

Afbeeldingslocatie: http://tweakers.net/ext/f/6cKHhiWaMUxfb22fvN0H0ooA/medium.png

Afbeeldingslocatie: http://tweakers.net/ext/f/53iOXbh2Tr6qPTqTmojg9Zz0/medium.png


Ik hoop dat jullie het een beetje begrijpen, en dat iemand weet hoe ik dit kan aanpakken. Zelf kom ik er namelijk niet uit...

Acties:
  • 0 Henk 'm!

  • TheNephilim
  • Registratie: September 2005
  • Laatst online: 15:32

TheNephilim

Wtfuzzle

Volgens mij ga je (heel simpel gezegd) gewoon kijken hoe ver er gescrolled is. Als de zwarte balk dan ver genoeg omhoog gescrolled is zodat je alleen die blauwe knoppen ziet, wijs je een (bijv.) position: fixed; toe met de juiste top zodat het bovenste gedeelte niet zichtbaar is.

Acties:
  • 0 Henk 'm!

  • Retpics
  • Registratie: Juni 2007
  • Laatst online: 18:13
Wat TheNephilim zegt klopt, voor meer informatie kun je met google zoeken op bijvoorbeeld: "jquery fixed menu position". Daarmee krijg ik genoeg resultaten voor de benodigde Javascript.

Acties:
  • 0 Henk 'm!

  • Beatboxx
  • Registratie: April 2010
  • Laatst online: 26-10-2022

Beatboxx

Certified n00b

Topicstarter
Top, het werkt!

Acties:
  • 0 Henk 'm!

Anoniem: 428930

Zou je je de werkende code kunnen laten zien? Ik ben erg geinteresseerd :)