JQuery - DIV, чтобы двигаться с прокруткой движения и придерживаться позиции сверху и снизу окна - PullRequest
Новая
       21

JQuery - DIV, чтобы двигаться с прокруткой движения и придерживаться позиции сверху и снизу окна

9 голосов
/ 23 февраля 2012

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

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

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ

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

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

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

Спасибо

Ответы [ 7 ]

10 голосов
/ 23 февраля 2012

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

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

Это было адаптировано из решения , опубликованного на CSS-хитрости

3 голосов
/ 30 августа 2012

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

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

2 голосов
/ 14 июня 2012

Вам не нужен 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;
}
1 голос
/ 23 февраля 2012
0 голосов
/ 06 июня 2012

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

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

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

/ * NewEdit * /

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

/ * EndEdit * /

0 голосов
/ 02 марта 2012

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

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

Что я сделал, так это то, что когда вы прокручиваете страницу вниз и она достигает верхней части боковой панели, она прилипает к верхней части окна. После того, как вы вернетесь назад к верху, он отклеится, если он встречает заголовок, независимо от того, насколько высоким становится заголовок.

0 голосов
/ 23 февраля 2012

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

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

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

...