jQuery change hash (identifiant de fragment) lors du défilement de la page

Je suis en train de construire un pager site web. Par exemple. chaque page (5 au total) est sur une grande page avec le menu principal fixe à la partie supérieure. Lorsque vous cliquez sur un lien du menu, il glisse jusqu'à ce que les pages balise d'ancrage et les cliqué sur l'élément de menu pour obtenir une "active" de la classe CSS.

Ce que je voudrais faire maintenant est de permettre à l'utilisateur de faire défiler de lui-même, mais encore le menu "active" et l'URL de hachage de modifier comme ils le font.

Donc ma question est fondamentalement comment puis-je savoir quand l'utilisateur a défilez vers le bas vers une autre page afin que je puisse mettre à jour le menu et l'URL de hachage (identificateur de fragment).

Grâce

source d'informationauteur Owen

  1. 18

    son possible, mais il y a une exigence à votre page (pour ma solution de travail):

    votre page doivent être séparés dans des divs(ou sections quoi que ce soit) avec des identifiants uniques (j'espère que vous ne faites pas de l'ancre <a>'s)

    que vous pouvez utiliser le code comme ceci:

    $(document).bind('scroll',function(e){
    $('section').each(function(){
        if (
           $(this).offset().top < window.pageYOffset + 10
//begins before top
        && $(this).offset().top + $(this).height() > window.pageYOffset + 10
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
        ) {
            window.location.hash = $(this).attr('id');
        }
    });
});

    avec le html comme ceci

    <section id="home">
  Home
</section>
<section id="works">
  Works
</section>
<section id="about">
  About
</section>
  2. 2

    J'ai le même problème pour fixer la hauteur de contenu de la section qui va changer en fonction de Hachage pour les faire défiler.En quelque sorte, ce code ne fonctionne pas sur d'autres navigateur en dehors de Chrome. Et également manipuler le DOM dans le défilement puis il a fallu très longtemps pour que l'événement pour obtenir des processus de reporter http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/ Voici un exemple de code de Comment je résoudre ce 

     (function () {
//Find all  top,bottom and Hash of each sections,
//Do this only if the section height remain the same always
//Move this into the step() if your section height does change.
//e.g. browser resize
//
var section = $.map($("section"), function (e) {
var $e = $(e);
var pos = $e.position();
return {
top: pos.top,
bottom: pos.top + $e.height(),
hash: $e.attr('id')
};
});
//Checking scroll 
var top = null;
var changed = false;
var currentHash = null;
$(window).scroll(function () {
var newTop = $(document).scrollTop();
changed = newTop != top;
if (changed) {
top = newTop;
}
});
//You wouldn't want to keep checking the scroll state as
//it affects the browser performance when it's accessing
//DOM and reduce your FPS (Frame per Seconds) for scrolling
//
function step() {
if (!changed) {
//Top did not change
return setTimeout(step, 200);
}
var count = section.length;
var p;
while (p = section[--count]) {
if (p.top >= top || p.bottom <= top) {
continue;
}
if (currentHash == p.hash) {
break;
}
var scrollTop = $(document).scrollTop();
window.location.hash = currentHash = p.hash;
//prevent browser to scroll
$(document).scrollTop(scrollTop);
}
setTimeout(step, 200);
}
setTimeout(step, 200);
})();

    Démo

  3. 1

    Vous êtes à la recherche pour le .de défilement() gestionnaire d'événement

  4. 1

    Avec jquery, vous pouvez utiliser le scrollTop méthode pour trouver la position de défilement et de le comparer à-dire la position des éléments sur la page où sur la page et mettre à jour en conséquence.