faites défiler puis accrochez-vous en haut

Demandais juste si quelqu'un a une idée de comment je pourrais re-créer une barre de navigation de style que j'ai vu il ya un moment, je viens de trouver ce site que je l'ai vu, mais je ne suis pas sûr de savoir comment ils ont peut-être eu là. Fondamentalement voulez défiler la page, puis de verrouillage vers le haut...

http://lesscss.org/

source d'informationauteur mediarts | 2011-02-26

18

Viens de faire un rapide "afficher la source" sur http://lesscss.org/ et vous verrez ceci:
```
window.onscroll = function () {
    if (!docked && (menu.offsetTop - scrollTop() < 0)) {
        menu.style.top = 0;
        menu.style.position = 'fixed'; 
        menu.className = 'docked'; 
        docked = true;
    } else if (docked && scrollTop() <= init) { 
        menu.style.position = 'absolute'; 
        menu.style.top = init + 'px';
        menu.className = menu.className.replace('docked', ''); 
        docked = false;  
    }
};
```
Ils sont contraignants pour les onscroll événement pour la fenêtre, cet événement est déclenché lorsque l'écran défile. Le docked indicateur est défini sur true lorsque le menu est "verrouillé" en haut de la page, le menu est réglé sur position:fixed en même temps que le drapeau est réglé sur true. Le reste n'est qu'une simple "sommes-nous sur pour faire défiler le menu de la page" et "sommes-nous sur le dos, là où nous avons commencé" la position de la logique de la vérification.

Vous devez être prudent avec les onscroll événements cependant, qu'ils peuvent le feu beaucoup dans une succession rapide de sorte que votre gestionnaire doit être assez rapide et devrait précalculer autant que possible.

En jQuery, il ressemblerait à peu près la même:
```
$(window).scroll(function() {
    //Pretty much the same as what's on lesscss.org
});
```
Vous voyez ce genre de chose assez souvent avec le "flottant presque fixe la position verticale de la barre d'outils" des choses comme celles sur cracked.com.

mu est trop court, la réponse est de travailler, je suis en train de poster cela pour vous donner le script jquery!

var docked = false;
var menu = $('#menu');
var init = menu.offset().top;

$(window).scroll(function() 
{       
        if (!docked && (menu.offset().top - $("body").scrollTop() < 0)) 
        {
            menu.css({
                position : "fixed",
                top: 0,
            });
            docked = true;
        } 
        else if(docked && $("body").scrollTop() <= init)
        {
            menu.css({
                position : "absolute",
                top: init + 'px',
            });

            docked = false;
        }
});

Mu réponse m'a beaucoup. J'ai tenté ma chance avec replicationg lesscss.org s'approche, mais a couru dans questions sur le navigateur de redimensionnement et de zoom. M'a fallu du temps pour savoir comment réagir à ça correctement et comment faire pour réinitialiser la position initiale (init) sans jQuery ou toute autre bibliothèque.

Trouver un aperçu sur JSFiddle: http://jsfiddle.net/ctietze/zeasg/

Voici donc la plaine du code JavaScript dans le détail, juste au cas où JSFiddle refuse de travailler.

Réutilisable de défilement puis-menu snap classe

Voici une version réutilisable. J'ai mis le défilement des vérifications dans une classe, car les méthodes d'assistance impliqués encombré mon espace principal:

var windowScrollTop = function () {
return window.pageYOffset;
};
var Menu = (function (scrollOffset) {
var Menu = function () {
this.element = document.getElementById('nav');
this.docked = false;
this.initialOffsetTop = 0;
this.resetInitialOffsetTop();
}
Menu.prototype = {
offsetTop: function () {
return this.element.offsetTop;
},
resetInitialOffsetTop: function () {
this.initialOffsetTop = this.offsetTop();
},
dock: function () {
this.element.className = 'docked'; 
this.docked = true;
},
undock: function () {
this.element.className = this.element.className.replace('docked', ''); 
this.docked = false;
},
toggleDock: function () {
if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
this.dock();
} else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) { 
this.undock();
}
}
};
return Menu;
})(windowScrollTop);
var menu = new Menu();
window.onscroll = function () {
menu.toggleDock();
};

Zoom de la poignée/page événements de redimensionnement

var updateMenuTop = function () {
//Shortly dock to reset the initial Y-offset
menu.undock();
menu.resetInitialOffsetTop();
//If appropriate, undock again based on the new value
menu.toggleDock();
};
var zoomListeners = [updateMenuTop];
(function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;
if (lastWidth == widthNow) {
return;
}
lastWidth = widthNow;
//Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();

1

Sonne comme une application de Jquery ScrollTop et de la manipulation des propriétés CSS de la barre de navigation de l'élément. Ainsi, par exemple, sous certaines conditions de défilement de la barre de navigation élément est modifié à partir de positionnement absolu avec les calculs des coordonnées de correction du positionnement.

http://api.jquery.com/scrollTop/
0

L'effet que vous décrivez commence avec un certain type d'animation, comme dans TheDeveloper de réponse. Par défaut les animations généralement faites glisser un élément autour en changeant sa position au fil du temps ou disparaître un élément dans/par changer son opacité, etc.

Obtenir le "bouce retour" ou "snap" effet implique généralement d'assouplissement. Tous les principaux cadres ont une certaine forme d'assouplissement disponibles. Il est tout au sujet de vos préférences personnelles, vous ne pouvez pas vraiment vous tromper avec l'un d'eux.

jQuery a l'assouplissement des plugins que vous pouvez utiliser avec la .animate() de la fonction, ou vous pouvez utiliser jQueryUI.

MooTools a l'assouplissement construit en pour le FX classe de la bibliothèque de base.

Yahoo YUI a également l'assouplissement construit en.

Si vous vous souvenez de ce site, vous pouvez toujours le visiter à nouveau et de prendre un coup d'oeil à leur source pour voir quel est le cadre et l'effet a été utilisé.

Vous devez vous connecter pour publier un commentaire.