Arrêter le défilement d'une position fixe à un moment donné?

Question

J'ai un élément qui est la position: fixe et fait donc défiler avec la page comment je le veux cependant. lorsque l'utilisateur fait défiler l'écran vers le haut, je souhaite que l'élément cesse de défiler à un moment donné, par exemple, lorsqu'il se trouve à 250 pixels du haut de la page, est-ce possible? Toute aide ou conseil serait utile merci!

J'avais le sentiment qu'il faudrait utiliser jQuery pour le faire. J’ai essayé d’obtenir le défilement ou l’emplacement de l’utilisateur, mais j’ai été vraiment dérouté. Existe-t-il des solutions jQuery?

Answer 1

Voulez-vous dire un peu comme ça?

http://jsfiddle.net/b43hj/

 $(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
 

 $(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>

<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR> 

Answer 2

Voici un rapide plugin jQuery que je viens d'écrire qui peut faire ce dont vous avez besoin:

 $.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);
 

Voir exemple de travail →

Answer 3

Ici est un plugin jquery qui permet de résoudre ce problème:

https://github.com/bigspotteddog/ScrollToFixed

La description de ce plugin est comme suit:

Ce plugin est utilisé pour fixer les éléments de la partie supérieure de la page, si l'élément aurait défilé de mode, à la verticale; cependant, il ne permet pas l'élément de continuer à se déplacer vers la gauche ou la droite avec la barre de défilement horizontale.

L'option marginTop, l'élément va cesser de déplacement vertical vers le haut une fois que le défilement vertical a atteint la position cible; mais, l'élément va encore se déplacer à l'horizontale comme à la page défile de droite ou de gauche. Une fois que la page a été défile en arrière vers le passé de la position de la cible, l'élément sera restauré à sa position d'origine sur la page.

Ce plugin a été testé dans Firefox, 3/4, Google Chrome 10 Et 11, Safari 5, et Internet Explorer 8/9.

L'utilisation de votre cas particulier:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});

Answer 4

Vous pouvez faire ce que James Montagne a fait avec son code dans sa réponse, mais cela le fera vaciller sous Chrome (testé en V19).

Vous pouvez résoudre ce problème si vous mettez "margin-top" au lieu de "top". Je ne sais pas vraiment pourquoi cela fonctionne avec la marge tho.

 $(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
 

http://jsbin.com/idacel

Answer 5

Autant que je sache, seule une solution basée sur javascript fera ce que vous voulez. Il n’existe pas de solution CSS pure pour ce faire.