web-dev-qa-db-fra.com

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

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, l'élément doit cesser 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 confus. Existe-t-il des solutions JQuery?

jquerycsspositioning
83
Louise McComiskey

Voici un plugin rapide 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 →

113
mVChr

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>

129
James Montagne

Voici un plugin complet jquery qui résout ce problème:

https://github.com/bigspotteddog/ScrollToFixed

La description de ce plugin est la suivante:

Ce plugin est utilisé pour fixer des éléments en haut de la page, si l'élément aurait défilé verticalement; Cependant, cela permet à l'élément de continuer à se déplacer à gauche ou à droite avec le défilement horizontal.

Avec une option marginTop, l'élément cessera de se déplacer verticalement vers le haut une fois que le défilement vertical a atteint la position cible. mais l'élément continuera à se déplacer horizontalement lorsque la page défilera à gauche ou à droite. Une fois que la page a été déplacée au-delà de la position cible, l'élément est restauré à sa position d'origine sur la page.

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

Utilisation pour 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 });
});
18
bigspotteddog

Vous pouvez faire ce que James Montagne a fait avec son code dans sa réponse, mais cela le fera clignoter en 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

6
Jure Ravlić

Dans un projet, un en-tête est effectivement fixé au bas de l'écran lors du chargement de la page (il s'agit d'une application de dessin de sorte que l'en-tête se trouve en bas pour laisser un espace maximal à l'élément de la toile dans une fenêtre large).

J'avais besoin que le titre devienne "absolu" lorsqu'il atteint le pied de page en défilement, car je ne veux pas que le titre passe au-dessus du pied de page (la couleur du titre est la même que la couleur de fond du pied de page).

J'ai pris la réponse la plus ancienne ici (publiée par Gearge Millo) et cet extrait de code a fonctionné pour mon cas d'utilisation. Avec quelques jeux, ça a fonctionné. Maintenant, le titre fixe se trouve magnifiquement au-dessus du pied de page une fois qu'il atteint le pied de page.

Je pensais que je partagerais mon cas d'utilisation et son fonctionnement et que je vous dirais merci! L'application: http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
3
joseph falconer

Une solution possible CSS SEULEMENT peut être obtenue avec position: sticky;

Le support du navigateur est réellement très bon: https://caniuse.com/#search=position%3A%20sticky

voici un exemple: https://jsfiddle.net/0vcoa43L/7/

3
JiiB

J'ai écrit un billet de blog à ce sujet qui comportait cette fonction:

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
2
Nathan McGinness

ma solution 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
2
user3288218

Une solution utilisant Mootools Framework.

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. Obtenir la position (x & y) de l'élément où vous voulez arrêter le défilement En utilisant $ ('myElement'). GetPosition (). X

    $ ('myElement'). getPosition (). y

  2. Pour une sorte d'animation, utilisez le défilement:

    new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();

  3. Pour définir le défilement immédiatement, utilisez:

    new Fx.Scroll (myElement) .set (x, y);

J'espère que cela t'aides !! :RÉ

0
Zohaib

J'ai aimé cette solution 

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

mon problème était que je devais traiter avec une position relative conteneur dans Adobe Muse.

Ma solution:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
0
leu

J’ai adoré la réponse de @james mais j’étais à la recherche de son inverse, c’est-à-dire d’arrêter la position fixe juste avant le pied de page, voici ce que j’ai trouvé

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

Alors maintenant, l'élément fixe s'arrête juste avant le pied de page. et ne se chevaucheront pas avec elle.

0
mshahbazm

J'ai adapté la réponse de @ mVchr et je l'ai inversée pour l'utiliser pour le positionnement des annonces collantes: si vous avez besoin de la positionner absolument (défilement) jusqu'à ce que l'en-tête des en-têtes ne soit plus affiché à l'écran, mais vous en avez ensuite besoin pour rester affiché à l'écran:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS: 

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
0
cbmtrx

Juste le code mVChr improvisé

$(".sidebar").css('position', 'fixed')

    var windw = this;

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

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
0
Sreeraj