Помогите сделать умную прокрутку
Здравствуйте. У меня на сайте есть боковая панель, которая прокручивается вместе со всем сайтом.
Мне нужно сделать так, чтобы боковая панель прокручивалась только если не влезает в размер экране по вертикали, а во всех остальных случаях была статической. То есть например высота экрана 600 пикселей. А Высота панели 700 пикселей, так вот в этом случае при прокрутке вниз она должна подняться вверх только на 100 пикселей и замереть, независимо от того что основной контент прокручивается далее. Подскажите как сделать, не обязательно конкретный код, хоть подскажите какие способы обычно используют, и какие функции где смотреть. Структура такая <body> <div id="sidebar></div> <div id="content></div> </body> |
oveflow: auto; + возможно Media Queries пригодится. |
Нет не подходит. Бар должен прокруичиваться вместе с контентом, но когда прокрутиться до конца, то замирает, независимо от того что контент крутится дальше
|
Вот вроде наше что то подобное http://sticky01.blogspot.ru/2013/09/4.html
Только там правый блок останавливается перед нижним, а мне нужно чтобы останавливался когда достигнет своего конца при прокрутке. Попробую разобраться |
Если я правильно понял, то боковой панельке можно поставить position:fixed, тогда она не будет прокручиваться вообще, а как вариант можно сделать так:
var scroll=document.documentElement.scrollTop; if(scroll>254){ //это условие заставляет двигаться элемент $('#bannerc').css({ 'top': function(){return scroll-254} }); }else{ // сбрасывает стили от первого и второго условия $('#bannerc').css({'top':'', 'bottom':''}) } if(scroll>$(window).height()){ //необходимое тебе условие, только придется поправить scroll на то выражение, кот. тебе нужно var y = $('#footer').height()+$('#copyright-content').height(); $('#bannerc').css({ 'top':'', 'bottom': -$('#bannerc').height()//лучше всего задать у панели bottom }) } p.s. JS - очень мутная фигня, почитай про jQuery, он намного удачней |
| Часовой пояс GMT +3, время: 17:00. |