Javascript Girl
  1. Javascript Girl
  3. Comment puis-je obtenir un menu de position fixe comme le menu de filtrage des commentaires de slashdot
Intereting Posts
Ddd illustr sav illustrddMMMMMMMMachachachachachacheaufdidence aledandddégidence aledanddégidence aledanddégidence aledé aledégea aledée aledégea aledédddégidence hélène citea al mandédice afddddachachach Vérifiez avec jquery si div a des éléments débordants Différence entre val () et texte () Feuilles en tissu et zoom Comment faites-vous Greasemonkey Cliquez sur un lien qui a spécifié du texte? Maintenir l'en-tête lors de l'ouverture du lien dans InAppBrowser TypeAhead.js et Bloodhound montrant un nombre impair de résultats Comment appeler un iMacro à partir de JavaScript? JQuery check / uncheck bouton radio onclick Existe-t-il un moyen d'utiliser les correspondants par défaut de Jasmine dans les matchers personnalisés? Comment modifier la valeur d'une variable globale dans une fonction Jasmine – Comment espionner un appel de fonction dans une fonction? Comment exécuter un script lorsque l'élément personnalisé est mis à niveau Pouvez-vous utiliser JQuery pour transfrom XML vers XML via XSLT Échelle de partage de JavaScript avec espace blanc

Comment puis-je obtenir un menu de position fixe comme le menu de filtrage des commentaires de slashdot

Slashdot dispose d'un petit widget qui vous permet de modifier votre seuil de commentaire afin de filtrer les commentaires bas-modifiés. Il sera en un seul endroit si vous vous déplacez vers le haut de la page, et lorsque vous faites défiler vers le bas, à un moment donné, où sa maison d'origine est sur le point de défiler la page, elle va passer à la position fixe et rester sur votre écran . (Pour voir un exemple, cliquez ici .)

Ma question est: comment puis-je avoir le même effet d'avoir un menu dans un seul endroit lors du défilement et passer à la position fixe lorsque l'utilisateur se déplace vers le bas? Je sais que cela impliquera une combinaison de CSS et javascript. Je ne recherche pas forcément un exemple complet de code de travail, mais quelles mesures mon code devra-t-il parcourir?

D'accord, j'ai compris. Je vais l'afficher ici au cas où cela aiderait quelqu'un d'autre. Cette solution utilise un prototype et une bibliothèque interne qui me donne les fonctions registerEvent, getElementX et getElementY, qui font ce que vous penseriez. 

var MenuManager = Class.create({ initialize: function initialize(menuElt) { this.menu = $(menuElt); this.homePosn = { x: getElementX(this.menu), y: getElementY(this.menu) }; registerEvent(document, 'scroll', this.handleScroll.bind(this)); this.handleScroll(); }, handleScroll: function handleScroll() { this.scrollOffset = document.viewport.getScrollOffsets().top; if (this.scrollOffset > this.homePosn.y) { this.menu.style.position = 'fixed'; this.menu.style.top = 0; this.menu.style.left = this.homePosn.x; } else { this.menu.style.position = 'absolute'; this.menu.style.top = null; this.menu.style.left = null; } } });

Appelez juste le constructeur avec l'identifiant de votre menu, et la classe le prendra à partir de là.

Merci de l'effort de partage de ce code. J'ai fait quelques petits changements pour le faire fonctionner avec la version actuelle de Prototype. 

 var TableHeaderManager = Class.create({ initialize: function initialize(headerElt) { this.tableHeader = $(headerElt); this.homePosn = { x: this.tableHeader.cumulativeOffset()[0], y: this.tableHeader.cumulativeOffset()[1] }; Event.observe(window, 'scroll', this.handleScroll.bind(this)); this.handleScroll(); }, handleScroll: function handleScroll() { this.scrollOffset = document.viewport.getScrollOffsets().top; if (this.scrollOffset > this.homePosn.y) { this.tableHeader.style.position = 'fixed'; this.tableHeader.style.top = 0; this.tableHeader.style.left = this.homePosn.x; } else { this.tableHeader.style.position = 'absolute'; this.tableHeader.style.top = null; this.tableHeader.style.left = null; } } });

Pour une démo mais pas basé sur le code ci-dessus, vérifiez:

Éléments flottants fixes