Kleben Sie div oben auf das übergeordnete Element

Question 1

Ich möchte das div an die Spitze seines übergeordneten Elements kleben.

Es funktioniert im Allgemeinen, außer in diesem Beispiel: http://jsfiddle.net/HV9HM/2859/

function sticky_relocate() {
    var window_top = $('#container').scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('.stick').css('width', $('#sticky').next().css('width'));
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $('#container').scroll(sticky_relocate);
    sticky_relocate();
});

.child {
    height: 200px;
    background: gray;
}

#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: fixed;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>

<div id="container" style="overflow-y: auto; height: 800px;">
  <div id="sticky-anchor"></div>
  <div id="sticky">This will stay at top of page</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Das Problem ist, dass wenn Sie das div scrollen, das aufgerufen wird container nach unten, das div wird nach oben gescrollt (es ist ein Fehler).

Wenn Sie ein weiteres untergeordnetes Element zu div hinzufügen:

<div class="child"></div>

Es klappt..

Sie können die funktionierende Geige hier sehen: http://jsfiddle.net/HV9HM/2860/

function sticky_relocate() {
    var window_top = $('#container').scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('.stick').css('width', $('#sticky').next().css('width'));
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $('#container').scroll(sticky_relocate);
    sticky_relocate();
});

.child {
    height: 200px;
    background: gray;
}

#sticky {
    padding: 0.5ex;
    width: 600px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: fixed;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
    
    <div id="container" style="overflow-y: auto; height: 800px;">
        <div id="sticky-anchor"></div>
        <div id="sticky">This will stay at top of page</div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

(Der Unterschied besteht darin, dass die erste Geige ein Kind weniger mit Klasse hat child).

Jede Hilfe geschätzt!

Question 2

Der Grund dafür ist, dass sobald Sie geben position: fixed zu deinem #sticky Element, nimmt es es aus dem Belegfluss heraus. Das bedeutet, dass alle Ihre div.child Elemente verschieben sich nach oben, wodurch die Höhe Ihres Containerelements kleiner wird. Da die Höhe des Containerelements kleiner wird, muss das Containerelement nicht mehr scrollen, was bedeutet, dass sein Scrollbalken verschwindet und seine Scrollposition auf 0 zurückgesetzt wird. Wenn seine Scrollposition auf 0 zurückgesetzt wird, entfernt das Skript wieder die stick Klasse von dir #sticky -Element und wir sind wieder da, wo wir angefangen haben, aber mit dem Container-Element, das ganz nach oben gescrollt ist.

Zusammenfassend:

#sticky Element bekommt .stick Klasse.

#sticky Element wird aus dem Dokumentenfluss entfernt, untergeordnete Elemente werden nach oben verschoben, die Höhe des Containerelements verringert sich und die Bildlaufleiste verschwindet. Behälter scrollTop wird auf 0 zurückgesetzt.
Das Skript wird erneut ausgelöst und entfernt die .stick Klasse ab #stickyund die des Containers scrollTop bleibt auf 0 (dadurch wird das Container-Div wieder nach oben gescrollt).

Unten ist eine Lösung, die verwendet position: absolute für die #sticky Element, und wenn die #sticky Element erhält die stick Klasse, es gibt die #sticky-anchor Element eine Höhe gleich der Höhe des #sticky -Element, um zu verhindern, dass die untergeordneten Divs nach oben verschoben werden.

Arbeitende Live-Demo:

function sticky_relocate() {
    var window_top = $('#container').scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    $('.stick').css('width', $('#sticky').next().css('width'));
    if (window_top > div_top) {
        $('#sticky-anchor').height($("#sticky").outerHeight());
        $('#sticky').addClass('stick');
        $("#sticky").css("top", (window_top) + "px");
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function () {
    $('#container').scroll(sticky_relocate);
    sticky_relocate();
});

.child {
    height: 200px;
    background: gray;
}

#sticky {
    padding: 0.5ex;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: absolute;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>

<div id="container" style="overflow-y: auto; height: 800px; position: relative;">
  <div id="sticky-anchor"></div>
  <div id="sticky">This will stay at top of page</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

JSFiddle-Version: http://jsfiddle.net/HV9HM/2883/

Als Nebenbemerkung, der Grund, warum es in Ihrem zweiten Beispiel gut funktioniert hat, ist, dass das zusätzliche untergeordnete Element es so gemacht hat, dass selbst wenn Ihr #sticky -Element aus dem Dokumentenfluss entfernt und die Höhe des Containerelements reduziert wurde, war die Höhe des Containerelements immer noch groß genug, um zu verhindern, dass die Bildlaufleiste springt/verschwindet und Ihre scrollTop.

Question 3

Obwohl die beste Antwort auf diese spezielle Frage eindeutig die von @MaximillianLaumeister ist, finden Sie hier eine allgemeine Lösung zum Befestigen eines Elements an einem anderen Element.

Halteseil

Tether ist eine JavaScript-Bibliothek, mit der ein absolut positioniertes Element effizient neben einem anderen Element auf der Seite bleiben kann.

Tether bietet die Möglichkeit, das Element innerhalb des Ansichtsfensters, seines Scroll-Elternteils, eines beliebigen anderen Elements auf der Seite oder eines festen Begrenzungsrahmens einzuschränken.

http://github.hubspot.com/tether/

Question 4

<table>
<tr class="relative" id="header">
    <td>header
    </td>
</tr>

<tr id="content">
    <td>table content
    </td>
</tr>

$(window).scroll(function() {

      if ($(window).scrollTop() > 140) {
        $("#header").addClass("fixed");
      } else {
        $("#header").removeClass("fixed");
      }
});

Nehmen Sie Bezug auf das folgende Beispiel
https://jsfiddle.net/nckv9mso/

Question 5

zusammen mit position:fixed;Sie müssen der Sticky-Navigationsleiste auch einen höheren Z-Index-Wert als den anderen Elementen derselben Seite geben z-index:blah;

Question 6

Das Problem tritt auf, wenn die Containerhöhe x ist und der Inhalt des Containers kleiner als x+36px ist. In diesem Beispiel ist der Container 800 Pixel groß und der Inhalt kleiner als 836 Pixel. Meine Idee für die Lösung war, die Höhe des Inhalts zu überprüfen und mit der Höhe des Containers zu vergleichen und wenn der Unterschied weniger als 36 Pixel beträgt, die Stick-Klasse einfach nicht hinzuzufügen.

Question 7

Es ist sehr einfach. Fügen Sie einfach das folgende Styling für das spezifische Sticky-Div hinzu.

klebrig{Position: fixiert;}