Ответ 1

Причина, по которой это происходит, заключается в том, что как только вы дадите position: fixed вашему элементу #sticky, он вытащит его из потока документов. Это означает, что все ваши элементы div.child смещаются вверх, что увеличивает высоту вашего элемента контейнера. Поскольку высота контейнерного элемента становится меньше, элемент контейнера больше не нужно прокручивать, что означает, что его полоса прокрутки исчезает, а ее положение прокрутки reset до 0. Когда ее положение прокрутки reset равно 0, script снова удаляет класс stick из вашего элемента #sticky, и мы вернулись туда, где мы начали, но с элементом контейнера, прокручиваемым вплоть до вершины.

Вкратце:

• #sticky элемент получает .stick класс.

• #sticky элемент удаляется из потока документов, дочерние элементы сдвигаются, высота элемента контейнера уменьшается, а полоса прокрутки исчезает. Контейнер scrollTop равен reset до 0.

• Script снова запускается, удаляя класс .stick из #sticky, а контейнер scrollTop остается равным 0 (таким образом, контейнер div прокручивается обратно вверх).

Ниже приведено решение, которое использует position: absolute для элемента #sticky, и когда элемент #sticky получает класс stick, он дает элементу #sticky-anchor высоту, равную высоте #sticky, чтобы предотвратить перемещение дочерних divs вверх.

Рабочая демонстрация в реальном времени:

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>

Ответ 2

Хотя лучший ответ на этот конкретный вопрос, очевидно, @MaximillianLaumeister, вот общее решение для фиксации элемента другому элементу.

Tether

Tether - это библиотека JavaScript для эффективного создания абсолютно расположенный элемент остается рядом с другим элементом на странице.

Tether включает в себя способность сдерживать элемент внутри viewport, его родительский прокрутка, любой другой элемент на странице или фиксированный ограничивающая рамка.

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

Ответ 3

вместе с position:fixed; вам также необходимо предоставить липкую навигационную панель более высокое значение z-индекса, чем другие элементы той же страницы, что и z-index:blah;

Ответ 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");
      }
});

Возьмем refrence из приведенного ниже примера https://jsfiddle.net/nckv9mso/

Ответ 5

Проблема возникает, когда высота контейнеров равна x, а содержимое контейнера меньше x + 36px. В этом примере контейнер составляет 800 пикселей, а контент меньше 836 пикселей. Моя идея для решения заключалась в том, чтобы проверить высоту содержимого и сравнить его с высотой контейнера, и если разница была меньше 36 пикселей, просто не добавляйте класс stick.

Ответ 6

его очень просто, просто добавьте следующий стиль для конкретного липкого div.

sticky {position: fixed;}