Fixation des onglets en haut de la page, mais sous l'en-tête

J'essaie de trouver comment concevoir un en-tête pour un site Web afin qu'il y ait des onglets placés sous l'en-tête (qui ressemblent à ceux qui sortent de l'en-tête), qui restent avec l'en-tête lorsque la page est défilée (Et l'en-tête se déplace vers le haut), mais quand ils atteignent le haut de la page, ils sont fixés là afin qu'ils soient toujours visibles.

Je sais comment réparer un élément en haut de la page afin qu'il soit toujours visible, mais lorsque l'en-tête est dans la fenêtre, je veux que les onglets apparaissent en dessous, pas en haut. Lorsque l'en-tête est hors de la page, les onglets seront toujours là.

Ce dont j'ai besoin, c'est une solution utilisant CSS et / ou JavaScript. Est-ce que quelqu'un sait d'une façon de faire cela?

Voir cette question et réponses

L'approche de base consiste à positionner l'élément absolument sur le chargement de la page, mais sur le défilement, modifier le positionnement sur fixed s'il est supporté, ou déplacer l'élément vers l'emplacement approprié.

 <div id="fix" style="position:absolute;top:30px;"> My fixedish div </div> 

Et quelques js rapides (devraient être nettoyés pour fonctionner sur le navigateur):

 // register event handler window.addEventListner("scroll", function(){ var div = document.getElementById("fix"); if (document.body.scrollHeight > 30) { // fix it to the top div.style.position = "fixed"; div.style.top = "0px"; } else { // position it below the header div.style.position = "absolute"; div.style.top = "30px"; } }); 

Remy Sharp , de Left Logic , et jQuery for Designers offre un tutoriel sur un sujet similaire: éléments flottants fixes .

Cela empêche le panier d'achat de l' Apple Store au Royaume – Uni (cliquez sur un produit à configurer et regardez les cases de résumé / spécifications au fur et à mesure que vous faites défiler la page) qui couvre pratiquement tout ce qu'il faut savoir pour adapter la technique en fonction de vos besoins.

De toute évidence, à partir de l'URL vers le site, il nécessite (ou, au moins, utilise ) jQuery, plutôt que le Javascript simple.

Vous pouvez consulter jQuery UI qui a un plugin à onglets, et il existe plusieurs exemples d'utilisation que vous pouvez trouver après une recherche restreinte.

Je ne pense pas que vous pouvez le faire avec css seulement, comme l'a dit SLaks. Même s'il existe un moyen de déclarations conditionnelles ou de hacks que je ne connais pas, je ne le ferais pas en raison principalement de deux raisons:

  • Cela ne fonctionnerait certainement pas avec tous les navigateurs.
  • Ce n'est certainement pas le choix approprié (la langue devrait correspondre au problème).

À l'aide de javascript, je suggère d'utiliser onScroll et scrollHeight pour mettre à jour les onglets css quand ils sont en haut de la page.

Le mien ne fonctionnait pas en dessous jusqu'à ce que j'aie ajouté ce "z-index: 999;"