Menu déroulant de défilement nav

Question

Actuellement, je travaille pour une page Web unique et ai un problème avec la sortie finale qui est quand cliquez sur le menu lien, il ne va pas à la position div ciblée (corrigez-moi si je me trompe). Et lorsque vous cliquez à nouveau sur le lien, il ira à l'autre position.

Im suivre ce tutoriel, callmenick

Voici la reproduction de celui-ci, jsfiddle

<nav> 
<ul> 
    <li><a href="#overview">Overview</a></li> <- when any click link, and then click again, there's some action happen. *bugs?* 
    <li><a href="#tech-spec">Tech Spec</a></li> 
    <li><a href="#support">Support</a></li> 
</ul> 
</nav> 

besoin Veuillez conseiller pour celui-ci.

Merci.

Answer 1

Ce que vous devez faire est d'ajouter vos « Acheter » section et dans votre navigation href ajouter le lien, comme:

<nav> 
    <ul> 
     <li><a href="#overview">Overview</a></li> 
     <li><a href="#tech-spec">Tech Spec</a></li> 
     <li><a href="#support">Support</a></li> 
     <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here --> 
    </ul> 
    </nav> 

Tout le reste semble fonctionner très bien.

Answer 2

Je ne vois aucun problème sur ma machine, mais cette fonctionnalité peut être abordée différemment. Voir mon exemple ci-dessous, cela pourrait résoudre le problème

---

1. Ajouter classe d'ancrage
2. Ajouter attribut de données
3. Faire fonction globale qui défile à certains points

Ainsi, par exemple

<div id="button-name"></div> 

devient

<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div> 

Maintenant, il y a une action JavaScript nécessaire, celui-ci lit l'attribut ancre données-dest et défile à lui.

$(".scrollAnchor").click(function(e){ 
    e.preventDefault(); 
    anchorDestination = $(this).data("anchor-dest"); 
    smoothScrollTo(anchorDestination); 
}); 

function smoothScrollTo(element) 
{ 
    $("html, body").stop().animate({ 
     scrollTop: $(element).offset().top 
    }, 1000); 
} 

Maintenant la question habituelle, comment est-ce compatible? This compatible, je l'ai testé moi-même dans IE9 et cela fonctionne.

Cette réponse peut être plus d'un désassemblage qu'une solution, mais j'espère que cela aide

Answer 3

Maintenant, je l'obtiens,

le problème est que le nav fixe ne fait pas partie de la flux de documents plus. Par conséquent, il ne sera pas réserver hauteur. Ou en d'autres termes, le reste des éléments ne le connaît plus. Tout comme display: none;

---

Vous devez trouver un moyen de pousser les éléments vers le bas par la hauteur de la navigation fixe, mais seulement si la navigation est fixe.

Il existe plusieurs façons de faire cela, mais cela dépend de la disposition. La première façon qui vient à l'esprit est l'application padding-top: ?px; à la # product-nav, via JS dès que fixe est appliqué au nav.

modifier: https://jsfiddle.net/ju648br4/4/