[jquery] Navigatie clone slidetoggle gedrag

[Nedra]

Op het moment ben ik bezig met het maken van een navigatiemenu waaronder een verborgen div uitkomt. Deze laat ik onder het menu uitkomen door middel van 'slidetoggle'.

Nou heb ik ook een scriptje waarbij ik het navigatiemenu, inclusief de verborgen div, mee laat komen aan de top van de pagina wanneer de gebruiker naar beneden scrolt. In feite wordt een div waar het navigatiemenu in zit gekloond en getoond wanneer een gebruiker een x afstand van de top van de pagina zit.

Wanneer men de verborgen div naar beneden laat komen in het standaard navigatiemenu (wanneer het gekloonde menu nog niet is geladen) komt deze al wel naar beneden bij het gekloonde menu maar gaat deze niet meer terug. Daardoor wordt de verborgen div onder de gekloonde navigatie al getoond als je daarna naar beneden scrolt. De toggles lopen dan ook niet meer synchroon.

Nou heb ik 't idee dat dit gebeurd omdat de gekloonde navigatie nog niet geladen is wanneer men op de slidetoggle knop drukt, maar waarom komt deze dan wel al tevoorschijn? Zou iemand me in de juiste richting kunnen wijzen?

Hier het verhaal op jsfiddle

[ Voor 13% gewijzigd door Nedra op 20-09-2011 14:08 ]

[Nedra]

Een klein schopje dan maar, omdat ik de omschrijving wat aangepast heb, en nog een foutje tegenkwam. Wanneer men halverwege de pagina is gescrold en dan de pagina refreshed komt de gekloonde navigatie niet meer terug. Heeft iemand daar toevallig ook nog een idee over?

[BtM909]

Ik heb je voorbeeld bekeken, maar snap nog steeds niet wat je wilt bereiken Kan je dat iets duidelijker uitleggen?

[Nedra]

hah ik ben echt belachelijk slecht in dit soort dingen uitleggen. Eigenlijk is het heel simpel. Druk je 2x op 'klik' dan wordt de verborgen div getoond en weer verborgen. Scroll je vervolgens naar beneden, dan is de verborgen div bij de gekloonde navigatie nog steeds getoond. Dat wil ik voorkomen. De verborgen div zou bij zowel de standaard navigatie als de gekloonde (dus die je zit wanneer je naar beneden scrolt) in dezelfde staat moeten zijn (verborgen of getoond)

[Naranya]

Zou je in plaats van het gekloon (waarbij je een 2x een div met id #navwrap krijgt) geen gebruik kunnen maken van css position: fixed?

[Blue-eagle]

Waarom kloon je dat ding? Hij kan prima standaard een position: fixed; hebben. Mocht je oudere versies van IE willen ondersteunen die hier niet mee om kunnen gaan, dan bouw je een browser check in voor deze versies van IE. Vervolgens laat je het script deze DIV positioneren.

Klonen komt volkomen onnodig op me over. Mocht dat onverhoopt toch nodig zijn: na je .clone() actie zorg je er middels JS weer voor dat je uitklap-DIV wordt verborgen.

[Nedra]

Goh dat was makkelijker dan ik had verwacht. Ik heb een .hide eraan toegevoegd en het werkt. Als ik eerlijk ben heb ik het menu gekloond omdat ik niet wist hoe ik dit effect anders zou moeten bereiken. In de daadwerkelijke website staat het menu een stuk lager op de pagina en ik wil de illusie geven dat de navigatie aan de top wordt meegesleurd wanneer men naar beneden scrolt (net als het bekijken van een mailtje in Gmail tegenwoordig).