JQuery - DIV для перемещения с прокруткой движения и положения палки вверху и внизу окна

Возможно, уже есть плагин jQuery, который может достичь этого, но я не могу найти, чтобы он выполнял именно то, что мне нужно. Если есть, просто укажите мне учебник, спасибо.

Моя проблема заключается в том, что у меня очень длинный контент страницы, и боковая панель не отображается, когда вы прокручиваетесь в нижней части страницы.

Итак, я бы хотел, чтобы мой #sidebar div придерживался верхней и нижней части окна моего браузера при прокрутке вверх и вниз по странице.

Моя высота боковой панели больше, чем у вашего типичного разрешения экрана, поэтому мне нужно, чтобы нижняя часть боковой панели была прикреплена к нижней части окна браузера, а также к верхней части браузера.

Итак, когда вы начинаете прокручивать вниз, боковая панель будет прокручиваться, как обычно, но когда вы достигнете конца боковой панели, она будет придерживаться и не будет прокручиваться, и когда вы начнете прокручивать вверх, боковая панель будет следовать до вершины боковая панель доходит до браузера, а затем она прилипает. Vice Versa.

Возможно ли это?

Я создал jsfiddle простой дизайн, который является центральным. Я добавил пунктирную границу на боковую панель, чтобы теперь вы вставили боковую панель.

http://jsfiddle.net/motocomdigital/7ey9g/5/

Любой совет, или вы знаете онлайн-учебник или демоверсию, будет самым потрясающим!

UPDATE

Пожалуйста, посмотрите эту попытку @Darek Rossman

http://jsfiddle.net/dKDJz/4/

У него появилась основная идея. Но прокрутка вверх, заставляет его щелкнуть вверх. Мне нужно, чтобы боковая панель была текучей с прокруткой вверх/вниз. Но придерживайтесь либо верхней, либо нижней части окна. Он также не должен фиксироваться, если верхний/нижний колонтитулы находятся в окне просмотра, поэтому он не накладывается.

Спасибо

ОТВЕТЫ

Ответ 1

Смотрите здесь скрипку: http://jsfiddle.net/dKDJz/2/

В принципе, вы просто наблюдаете за событиями прокрутки, и как только смещение прокрутки окна больше, чем верхняя часть боковой панели, он добавляет фиксированный класс на боковую панель и удаляет его при прокрутке назад.

Это было адаптировано из решения, размещенного в CSS-Tricks

Ответ 2

Я обновил jsfiddle http://jsfiddle.net/7ey9g/76/ с моим решением.

Боковая панель должна оставаться на месте сверху, когда окно больше боковой панели и фиксируется снизу, когда боковая панель больше.

Ответ 3

Для этого вам не нужен jQuery или javascript. Все это можно сделать в CSS с помощью position: fixed.

Измените селектор боковой панели на следующие

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}

Ответ 5

К сожалению, мне не хватает репутации, чтобы просто прокомментировать эту ссылку, поэтому здесь вы идете:

http://www.derekallard.com/blog/post/conditionally-sticky-sidebar

Это несколько лет назад, но, основываясь на скриншотах, кажется, он охватывает именно то, что вам нужно.

Ответ 6

Попробуйте здесь http://jsfiddle.net/dKDJz/8/

Я удалил совсем немного кода.

Я сделал то, что, когда вы прокручиваете вниз и доходит до верхней части боковой панели, она прилипает к верхней части окна. Как только вы прокрутите назад до вершины, он будет отклеиваться, если он встретит заголовок, независимо от того, насколько высок заголовок.

Ответ 7

Я играл с тем, что делал Дерек, и я выполнил верх и низ, как вы изначально просили.

Я отредактировал некоторые из css для своих нужд, я уверен, что вы можете просто сохранить свой старый материал и скопировать script.

http://jsfiddle.net/mLdnb/3/

/* NewEdit */

Я заменил то, что я сделал с тем, что у вас есть. Я придумал это:
http://jsfiddle.net/stillb4llin/dKDJz/47/

/* EndEdit */