Добавить границы элемента с позиции: исправлено

Question

У меня есть div с position: fixed, который правильно перемещается со свитком, но я бы хотел, чтобы он остановился, когда достигнет определенных (ось Y) границ.Какой способ сделать это?

В идеале решение не мерцает и является производительным.Правая панель Twitter близка к тому, что я хотел бы.

Answer 1

Это более функциональный вариант http://jsbin.com/ijexe (обновлен код для повторного включения исходной позиции ... по существу, когда он достигнет своей исходной верхней позиции, он снова начнет прокручиваться)

Вы можетеобновите код http://jsbin.com/ijexe для проверки, просто заменив функцию jquery на приведенную ниже ...

В

<script type="text/javascript" src="Sandbox_files/jquery.min.js"></script>

в примере:

.fixedElement {
    Z-INDEX: 100; POSITION: absolute; BACKGROUND-COLOR: #c0c0c0; WIDTH: 100%; HEIGHT: 30px; COLOR: #800000; FONT-SIZE: large; TOP: 200px
}

(просто убедитесь, что ваша позиция: абсолютное и верхнее: значение установлено)

Обновлена ​​функция (место перед закрывающим тегом тела)

<script type="text/javascript">
$(window).scroll(function(e){

  var scrollTo = 200;
  var scrollClass = '.fixedElement';

  $el = $(scrollClass);
  position = $el.position();
  if ($(this).scrollTop() > scrollTo && $el.css('position') != 'fixed'){
    $(scrollClass).css({'position': 'fixed', 'top': '0px'});
  } else if ((position.top < scrollTo) && ($el.css('position') != 'relative')){
     $(scrollClass).css({'position': 'relative', 'top': '200px'});
  }
});
</SCRIPT>

Вы можете обновить:scrollTo - Смещение от верхней части экрана, чтобы запустить / остановить прокрутку элемента

* Просто убедитесь, что для scroll to установлено то же значение, что и для вашей таблицы стилей ...

scrollClass - Имя класса для элемента (ов), к которому применяется функция