Div mee schuiven als onderkant is bereikt
Ik heb aan de rechterkant van mijn site een menu. Dit begint onder de header. Als ik de onderkant van het menu heb bereikt maar de pagina langer is wil ik dat het menu mee schuift. Het menu moet niet vanaf bovenaf zichtbaar worden, maar van onder af dus...
Scroll ik naar boven dan moet hij vanaf onder meeschuiven naar boven totdat de oorspronkele positie is bereikt.
Hoe kan ik dit het beste doen?
Bedankt!
Ik wil net dat de onderkant (als deze bereikt is), aan de onderkant van het scherm plakt.
Ik heb het met een afbeelding proberen te illustreren:
Thomas van Broekhoven op 06/07/2014 15:17:05:
Dit is een lastige situatie. Want wat gebeurd er als het scherm van de gebruiker hoger is dan je menu? Dan krijg je dus een situatie dat je menu niet aan de onderkant zit.
Mijn idee is er net voor om te zorgen dat het ook goed te zien is voor gebruikers met een "kleiner" scherm.
Het menu begint bovenaan. Als ik scroll blijft het menu gewoon vast staan (scrolt niet mee)... Is de onderkant van het menu bereikt, dan mag het mee scrollen.
Met position: fixed of de laatste link staat het menu altijd vast idd. Het begint al gelijk mee te scrollen waardoor het voor kan komen dat de onderkant van het menu niet in beeld komt.
Met mijn idee gebeurt dat wel, maar blijkbaar is dat niet zo makkelijk te maken
De rechter div begint gelijk mee te scrollen totdat de onderkant bereikt is. Scroll je helemaal naar beneden en dan weer omhoog, dan scrollt de rechterdiv eerst weer tot aan de bovenkant van de div en daarna gaat de hele div omhoog.
Weet iemand hoe ik dat kan maken of wellicht waar ik op kan zoeken?
Vriendelijk bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//als de 100 pixels zijn bereikt doe het volgende
if (scroll >= 100) {
//als de 100 pixels zijn bereikt voeg dan class fixed toe aan class "nav"
$(".nav").addClass("fixed");
}
else {
//is het minder dan 100 pixel verwijder de class fixed van class nav
$(".nav").removeClass("fixed");
}
});
</script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//als de 100 pixels zijn bereikt doe het volgende
if (scroll >= 100) {
//als de 100 pixels zijn bereikt voeg dan class fixed toe aan class "nav"
$(".nav").addClass("fixed");
}
else {
//is het minder dan 100 pixel verwijder de class fixed van class nav
$(".nav").removeClass("fixed");
}
});
</script>
de 100 kun je veranderen wanneer dat jij wilt dat het element fixed meekrijgt.
in de css kun je dan:
Code (php)
1
2
3
2
3
position:fixed;
top:50px;
speel daar maar eens mee :-)
Gewijzigd op 19/12/2014 10:59:51 door Jop B