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

Keine exakte Lösung, aber eine gute Alternative, die man in Betracht ziehen sollte

diese CSS ONLY Bildlaufleiste am oberen Bildschirmrand . Gelöst alle das Problem mit NUR CSS , NO JavaScript, NO JQuery, Nein Gehirnarbeit ( lol ).

Genießen Sie meine Fiedel :D alle Codes sind dort enthalten :)

CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

Setzen Sie den Inhalt lang genug, damit Sie den Effekt hier sehen können :) Oh, und die Referenz ist auch drin, für die Tatsache, dass er verdient sein Kredit

CSS ONLY Bildlaufleiste am oberen Bildschirmrand

Answer 2

Sticky bis die Fußzeile auf das div:

function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);