Comment puis-je faire un div stick vers le haut de l'écran une fois que c'est fait défiler à l'?

Vous avez vu de cet exemple sur Google Code problème de page et (récemment) sur un Débordement de Pile de modifier la page.

Du CMS de réponse ne veut pas revenir sur le positionnement lorsque vous faites défiler vers le haut. Voici la volé sans vergogne code de Débordement de Pile:

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.

Naissant, script sans alternative est position: sticky, qui est pris en charge dans Chrome, Firefox et Safari. Voir la article sur HTML5Rocks et démo, et Mozilla docs.

J'ai eu le même problème que vous et a fini par faire un plugin jQuery pour prendre soin d'elle. Il résout tous les problèmes que les gens ont répertorié ici, et en plus il ajoute un couple de fonctionnalités optionnelles trop.

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

C'est la façon dont je l'ai fait avec jquery. C'était tout bricolé à partir des réponses très diverses sur un débordement de pile. Cette solution met en cache les sélecteurs pour des performances plus rapides et résout également le "saut" problème lors de la collante div devient collante.

Le vérifier 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);
        }
    });
});

Comme Josh Lee et Colin 't Hart l'ai dit, vous pouvez éventuellement simplement utiliser position: sticky; top: 0; l'application de la div que vous voulez que le défilement à...

Plus, la seule chose que vous avez à faire est de copier dans le haut de votre page ou de format, de s'insérer dans une feuille CSS externe:

<style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>

Il suffit de remplacer #sticky_div's_name_here avec le nom de votre div, c'est à dire si votre div a été <div id="example"> vous mettez #example { position: sticky; top: 0; }.

Voici encore une version à essayer pour ceux qui ont des problèmes avec les autres. Il rassemble les techniques abordées dans cette double question, et génère le nécessaire helper DIVs dynamiquement donc pas de supplément HTML n'est requise.

CSS:

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

JQuery:

function make_sticky(id) {
    var e = $(id);
    var w = $(window);
    $('<div/>').insertBefore(id);
    $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
    var n = e.next();
    var p = e.prev();
    function sticky_relocate() {
      var window_top = w.scrollTop();
      var div_top = p.offset().top;
      if (window_top > div_top) {
        e.addClass('sticky');
        n.show();
      } else {
        e.removeClass('sticky');
        n.hide();
      }
    }
    w.scroll(sticky_relocate);
    sticky_relocate();
}

Pour en faire un élément collant, n':

make_sticky('#sticky-elem-id');

Lorsque l'élément devient collante, le code permet de gérer la position du reste du contenu pour l'empêcher de sauter dans le vide laissé par le collant de l'élément. Il renvoie également le collant élément d'origine de la non-collante position lors du défilement en arrière au-dessus d'elle.

Je suis tombé sur ce lors de la recherche de la même chose. Je sais que c'est une vieille question, mais je pensais que je voudrais offrir une plus récente réponse.

Scrollorama a un "pin it" fonctionnalité qui est exactement ce que je cherchais.

http://johnpolacek.github.io/scrollorama/

La accepté de répondre fonctionne, mais ne pas revenir à la position précédente si vous faites défiler au-dessus d'elle. Il est toujours coincé vers le haut après avoir été placé là.

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

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

jleedev la réponse devrait fonctionner, mais je n'ai pas réussi à le faire fonctionner. Son exemple la page ne fonctionne pas (pour moi).

J'ai des liens d'installation dans un div c'est donc une liste verticale de la lettre et le nombre de liens.

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

Je puis l'installation de cette pratique jQuery fonction pour enregistrer la position de chargement et puis changer la position fixe lors du défilement au-delà de cette position.

REMARQUE: cela ne fonctionne que si les liens sont visibles sur le chargement de la page!!

var listposition=false;
jQuery(function(){
     try{
        /////stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //   console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor [email protected] (Myvendor JavaScript Issue)');
    }
});

En javascript que vous pouvez faire:

var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

Voici un exemple qui utilise jquery-visible plugin: http://jsfiddle.net/711p4em4/.

HTML:

<div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 500px;
    background-color: #5e5e5e;
    font: 20px/500px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

.wrapper > main > nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

JS (jquery comprend visible plugin):

(function($){
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
*       the user visible viewport of a web browser.
*       only accounts for vertical position, not horizontal.
*/
var $w = $(window);
$.fn.visible = function(partial,hidden,direction){
if (this.length < 1)
return;
var $t        = this.length > 1 ? this.eq(0) : this,
t         = $t.get(0),
vpWidth   = $w.width(),
vpHeight  = $w.height(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
if (typeof t.getBoundingClientRect === 'function'){
//Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top    >= 0 && rec.top    <  vpHeight,
bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
lViz = rec.left   >= 0 && rec.left   <  vpWidth,
rViz = rec.right  >  0 && rec.right  <= vpWidth,
vVisible   = partial ? tViz || bViz : tViz && bViz,
hVisible   = partial ? lViz || rViz : lViz && rViz;
if(direction === 'both')
return clientSize && vVisible && hVisible;
else if(direction === 'vertical')
return clientSize && vVisible;
else if(direction === 'horizontal')
return clientSize && hVisible;
} else {
var viewTop         = $w.scrollTop(),
viewBottom      = viewTop + vpHeight,
viewLeft        = $w.scrollLeft(),
viewRight       = viewLeft + vpWidth,
offset          = $t.offset(),
_top            = offset.top,
_bottom         = _top + $t.height(),
_left           = offset.left,
_right          = _left + $t.width(),
compareTop      = partial === true ? _bottom : _top,
compareBottom   = partial === true ? _top : _bottom,
compareLeft     = partial === true ? _right : _left,
compareRight    = partial === true ? _left : _right;
if(direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
else if(direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
else if(direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
}
};
})(jQuery);
$(function() {
$(window).scroll(function() {
$(".wrapper > header").visible(true) ?
$(".wrapper > main > nav").removeClass("fixed") :
$(".wrapper > main > nav").addClass("fixed");
});
});

Vous pouvez faire cela avec le css() méthode de jQuery:

$('#myDiv').css({'position':'sticky','top':'5px'});