Arrêter le défilement à un certain moment

Question

J'essaie de reproduire quelque chose de similaire à este .

Lorsque vous faites défiler le texte vers le bas, la barre de défilement défile avec vous ( position: fixed ) jusqu'à ce qu'il atteigne un certain point, où il s'arrête ( position: absolute ), et lorsque vous continuez à faire défiler la page vers le bas, il conserve cette position sur la page ( 250px ), jusqu'à ce que vous fassiez défiler l'écran pour le reprendre.

Ce que j'ai jusqu'à présent .

Actuellement, mon violon fait tout ce qu'il faut, sauf qu'il ne conserve pas la position à laquelle il a été "déposé", mais retourne à sa position d'origine.

Des idées ?

Answer 1

Vous devez calculer la valeur de scrollTop de la fenêtre, puis l'appliquer comme valeur de top et définir la position comme absolue.

$('element').css({
    'top': $(window).scrollTop(),
    'position': 'absolute'
});

Au fur et à mesure du défilement, la valeur de scrollTop changera, vous ne devez donc effectuer cette opération qu'une seule fois. Utilisez une variable pour garder une trace de l'état dans lequel se trouve l'élément. Pour autant que je sache, il en existe trois :

1. Relative
2. Fixe
3. Absolu

Cette variable permet également de réduire la charge du navigateur en ne définissant une classe que lorsqu'elle est nécessaire. Par exemple, cette variable permet de réduire la pression sur le navigateur en ne définissant une classe que lorsqu'elle est nécessaire :

if( y > 100 && pos != 'fixed' ){

    pos = 'fixed';

    $('element').addClass('fixed');

}else if( y > 100 && pos != 'relative' ){

    pos = 'relative';

    $('element').addClass('relative');

}

J'espère que cela vous aidera :)

Answer 2

J'ai procédé à la modification suivante de :

if (y >= socialTop & y <= 150) {
    $('#static-social').addClass('fixed');
} else {
    $('#static-social').removeClass('fixed');
}

A :

if (y >= socialTop & y <= 150) {
    $('#static-social').css('marginTop', $(this).scrollTop());
}

Cela permet de s'assurer que l'élément reste en haut de la page en fonction de la position de la fenêtre, de sorte que lorsque vous faites défiler la page vers le haut, il reste là où il était.