Wie kann ich erreichen, dass ein Div am oberen Rand des Bildschirms bleibt, wenn es einmal gescrollt wurde?

Question

Ich möchte ein Div erstellen, das sich unter einem Inhaltsblock befindet, das aber, sobald die Seite so weit gescrollt wurde, dass es seine obere Begrenzung berührt, an Ort und Stelle fixiert wird und mit der Seite scrollt.

Answer 1

Sie können einfach css verwenden und Ihr Element wie folgt positionieren fest :

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

Bearbeiten: Sie sollten das Element mit absoluter Position haben, sobald der Scroll-Offset das Element erreicht hat, sollte es auf fixiert geändert werden, und die obere Position sollte auf Null gesetzt werden.

Sie können den oberen Bildlaufversatz des Dokuments mit der Option scrollTop Funktion:

$(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'}); 
  } 
});

Wenn der Bildlaufversatz 200 erreicht hat, wird das Element Stick an den oberen Rand des Browserfensters, da es als feststehend platziert ist.

Answer 2

Sie haben dieses Beispiel auf der Google Code-Seite gesehen Ausgabeseite und (erst kürzlich) auf der Bearbeitungsseite von Stack Overflow.

Die Antwort des CMS kehrt die Positionierung nicht um, wenn Sie wieder nach oben scrollen. Hier ist der schamlos gestohlenen Code von 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> 

Und eine einfache Live-Demo .

Eine im Entstehen begriffene, skriptfreie Alternative ist position: sticky , die von Chrome, Firefox und Safari unterstützt wird. Siehe die Artikel auf HTML5Rocks und Demo und Mozilla-Dokumente .

Answer 3

Seit Januar 2017 und der Veröffentlichung von Chrome 56 unterstützen die meisten gebräuchlichen Browser die position: sticky Eigenschaft in CSS.

#thing_to_stick {
  position: sticky;
  top: 0px;
}

funktioniert bei mir in Firefox und Chrome.

In Safari müssen Sie weiterhin position: -webkit-sticky .

Polyfills sind für Internet Explorer und Edge verfügbar; https://github.com/wilddeer/stickyfill scheint eine gute Lösung zu sein.

Answer 4

Und so geht's ohne jquery (UPDATE: siehe andere Antworten, wo man dies jetzt nur mit CSS machen kann)

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 5

Ich hatte das gleiche Problem wie Sie und endete damit, dass ich ein jQuery-Plugin entwickelt habe, um das Problem zu beheben. Es löst tatsächlich alle Probleme, die Leute haben hier aufgeführt, plus es fügt ein paar optionale Funktionen zu.

Optionen

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

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