Comment faire en sorte qu'un div reste en haut de l'écran après avoir été défilé ?

Question

Je voudrais créer un div, situé sous un bloc de contenu, mais qui, une fois que la page a été suffisamment déroulée pour entrer en contact avec sa limite supérieure, devient fixe en place et défile avec la page.

Answer 1

Vous pourriez utiliser simplement du css, en positionnant votre élément comme Correction de :

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit : L'élément doit avoir une position absolue. Une fois que le décalage de défilement a atteint l'élément, il doit devenir fixe et la position supérieure doit être mise à zéro.

Vous pouvez détecter le décalage de défilement supérieur du document avec la fonction scrollTop fonction :

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

Lorsque le décalage de défilement atteint 200, l'élément bâton en haut de la fenêtre du navigateur, car il est placé comme fixe.

Answer 2

Vous avez déjà vu cet exemple sur le site de Google Code page de sortie et (tout récemment) sur la page d'édition de Stack Overflow.

La réponse du CMS ne rétablit pas le positionnement lorsque vous faites défiler la page vers le haut. Voici le code volé sans vergogne sur Stack Overflow :

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

Et un simple Démonstration en direct .

Une alternative naissante, script-free est position: sticky qui est pris en charge par Chrome, Firefox et Safari. Voir le article sur HTML5Rocks y Démonstration y Documents de Mozilla .

Answer 3

Et voici comment sans jquery (MISE À JOUR : voir d'autres réponses où vous pouvez maintenant faire cela avec CSS seulement)

var startProductBarPos=-1;
window.onscroll=function(){
  var bar = document.getElementById('nav');
  if(startProductBarPos<0)startProductBarPos=findPosY(bar);

  if(pageYOffset>startProductBarPos){
    bar.style.position='fixed';
    bar.style.top=0;
  }else{
    bar.style.position='relative';
  }

};

function findPosY(obj) {
  var curtop = 0;
  if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}

* {margin:0;padding:0;}
.nav {
  border: 1px red dashed;
  background: #00ffff;
  text-align:center;
  padding: 21px 0;

  margin: 0 auto;
  z-index:10; 
  width:100%;
  left:0;
  right:0;
}

.header {
  text-align:center;
  padding: 65px 0;
  border: 1px red dashed;
}

.content {
  padding: 500px 0;
  text-align:center;
  border: 1px red dashed;
}
.footer {
  padding: 100px 0;
  text-align:center;
  background: #777;
  border: 1px red dashed;
}

<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>

Answer 4

J'ai eu le même problème que vous et j'ai fini par créer un plugin jQuery pour m'en occuper. Il résout en fait tous les problèmes que les gens ont énumérés ici, en plus d'ajouter quelques fonctions facultatives.

Options

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

https://github.com/donnyv/sticky-panel

démo : http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm

Answer 5

Voici comment je l'ai fait avec Jquery. Tout cela a été bricolé à partir de diverses réponses sur stack overflow. Cette solution met en cache les sélecteurs pour une performance plus rapide et résout également le problème de "saut" lorsque la div collante devient collante.

Découvrez-le sur jsfiddle : http://jsfiddle.net/HQS8s/

CSS :

.stick {
    position: fixed;
    top: 0;
}

JS :

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});