Сделать div stick до верхней части страницы после прокрутки мимо другого div?

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

<style>
  body { margin: 0px; background-color: #e3e3e3; }
  #header { background-color: #cb5454; height: 140px; }
  #sticky { background-color: #546bcb; height: 70px; }
  #section { height: 1500px; }
  #footer { background-color: #cb5454; height: 140px; }
</style>

Вот мой код: http://jsfiddle.net/uaqh018d/

Я хочу, чтобы #sticky придерживался верхней части страницы после прокрутки вперед #header. Я также хочу, чтобы он был скрыт до тех пор, пока не застрял. И тогда, конечно, он будет разблокировать + скрыть снова после прокрутки назад до #header.

Как я могу это достичь?

Ответы

Ответ 1

Я бы рекомендовал добавить класс к #sticky, когда он будет готов к установке в верхнюю часть экрана, а затем удалит этот класс, когда вы хотите его "разблокировать". Затем вы можете манипулировать этим классом в CSS.

например. для класса fixed вы должны добавить следующее в свой CSS:

#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

И тогда ваш jQuery будет выглядеть так:

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

Здесь обновлен FIDDLE

Я также мог бы рекомендовать некоторые эффекты jade или fake (см. скрипку).

Ответ 2

Вы можете использовать position: fixed и в js обнаруживать, когда пользователь прокручивается следующим образом:

$(document).scroll(function() {
  //detect when user scroll to top and set position to relative else sets position to fixed
  $("#sticky").css({
    "top": "0",
    "position": $(this).scrollTop() > 140 ? "fixed" : "relative"
  });
});

body {
  margin: 0px;
  background-color: #e3e3e3;
}
#header {
  background-color: #cb5454;
  height: 140px;
}
#sticky {
  background-color: #546bcb;
  height: 70px;
  width: 100%;
  position: fixed;
}
#section {
  height: 1500px;
}
#footer {
  background-color: #cb5454;
  height: 140px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

Ответ 3

В моем случае, div, который я хотел прикрепить, находился внутри другого div (т.е. не привязан к странице, а в другом фиксированном div на стороне страницы). Вот моя адаптация ответа @bowhart для решения этой проблемы с учетом компонента React (sticky_adapter.js):

module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
  const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
  const position = thisNode.position();

  // Uncomment for verbose logging
  //console.log("Initial position: " + UIUtils.stringify(position));

  const scrollContainer = $(parentScrollNode);
  scrollContainer.scroll(() => {
    const distanceFromTop = scrollContainer.scrollTop();
    // Uncomment for verbose logging
    //console.log("ScrollTop: " + distanceFromTop);

    if (distanceFromTop > position.top) {
      thisNode.addClass("stick-to-top");
    } else {
      thisNode.removeClass("stick-to-top");
    }
  });
};

Теперь, чтобы сделать любой компонент React липким, я просто добавляю в класс:

componentDidMount() {
  StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}

Наконец, CSS для липкого класса:

.stick-to-top {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
}