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

Die einfachste Lösung (ohne js) : Demo

.container {
  position: relative;
}
.sticky-div {
    position: sticky;
    top: 0;
}

<div class="container">
  <h1>
    relative container & sticky div
  </h1>
  <div class="sticky-div"> this row is sticky</div>
  <div>
    content
  </div>
</div>

Answer 2

So habe ich es mit Jquery gemacht. Dies war alles zusammengeschustert aus verschiedenen Antworten auf Stack Overflow. Diese Lösung zwischenspeichert die Selektoren für schnellere Leistung und löst auch die "Springen" Problem, wenn die klebrige div klebrig wird.

Probieren Sie es auf jsfiddle aus: 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);
        }
    });
});

Answer 3

Als Josh Lee und Colin 't Hart gesagt haben, könnten Sie optional einfach die position: sticky; top: 0; auf das Div anwenden, bei dem der Bildlauf stattfinden soll...

Das Einzige, was Sie tun müssen, ist, dies in den oberen Bereich Ihrer Seite zu kopieren oder es so zu formatieren, dass es in ein externes CSS-Sheet passt:

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

Einfach ersetzen #sticky_div's_name_here mit dem Namen Ihres div, d.h. wenn Ihr div war <div id="example"> Sie würden #example { position: sticky; top: 0; } .

Answer 4

Hier ist eine weitere Möglichkeit:

JAVASCRIPT

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

Ihr #myElementToStick sollte beginnen mit position:absolute CSS-Eigenschaft.

Answer 5

Hier ist eine weitere Version für diejenigen, die Probleme mit den anderen Versionen haben. Sie fasst die Techniken zusammen, die in diese doppelte Frage und erzeugt die erforderlichen Hilfs-DIVs dynamisch, so dass kein zusätzliches HTML erforderlich ist.

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

Um ein Element klebrig zu machen, tun Sie dies:

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

Wenn das Element klebrig wird, verwaltet der Code die Position des verbleibenden Inhalts, um zu verhindern, dass er in die Lücke springt, die das klebrige Element hinterlässt. Außerdem wird das Sticky-Element in seine ursprüngliche, nicht-klebrige Position zurückgebracht, wenn darüber zurückgeblättert wird.