Div mee schuiven als onderkant is bereikt

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Shamrock Modelbouw

Shamrock Modelbouw

05/07/2014 13:56:53
Quote Anchor link
Hoi,

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!
 
PHP hulp

PHP hulp

08/11/2024 19:49:55
 
Bas IJzelendoorn

Bas IJzelendoorn

05/07/2014 14:25:16
Quote Anchor link
Dit kan je met Jquery doen.

Ik kwam dit tegen. Bedoel je zoiets?
 
Shamrock Modelbouw

Shamrock Modelbouw

05/07/2014 15:19:11
Quote Anchor link
Ok, dat wat jij bedoeld ken ik inderdaad, maar nu plakt de bovenkant van het menu aan de bovenkant van de pagina vast.

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:

Afbeelding
 
Thomas van Broekhoven

Thomas van Broekhoven

06/07/2014 15:17:05
Quote Anchor link
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.
 
Mike van den Hoek

Mike van den Hoek

06/07/2014 21:51:28
Quote Anchor link
Misschien met css? position:fixed;
 
Frank Nietbelangrijk

Frank Nietbelangrijk

06/07/2014 22:00:33
 
Shamrock Modelbouw

Shamrock Modelbouw

09/07/2014 12:30:24
Quote Anchor link
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
 
Shamrock Modelbouw

Shamrock Modelbouw

19/12/2014 10:08:27
Quote Anchor link
Ik ben eigenlijk nog steeds op zoek naar dit idee. Om wat duidelijkheid te geven, Yahoo gebruikt het ook: http://finance.yahoo.com/news/

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!
 
Jop B

Jop B

19/12/2014 10:57:01
Quote Anchor link
even je eigen class maken etc.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


de 100 kun je veranderen wanneer dat jij wilt dat het element fixed meekrijgt.

in de css kun je dan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3

position:fixed;
top:50px;


speel daar maar eens mee :-)
Gewijzigd op 19/12/2014 10:59:51 door Jop B
 



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.