Заставить саму полосу прокрутки прекратить движение вверх (поддельное ограничение), пока div все еще прокручивается вверх.
jsFiddle: http://jsfiddle.net/2ezQ9/2/
На моем сайте я использую NiceScroll3, чтобы иметь полосу прокрутки внутри контейнера div, который извлекает данные с помощью AJAX. Моя проблема заключается в следующем: когда я прокручиваю до верхней части контейнера div, полоса прокрутки сама продолжает прокручиваться под заголовком и до верхней части контейнера. Это нормально, я знаю, но я бы хотел, чтобы полоса прокрутки остановилась внизу заголовка, когда контейнер завершит прокрутку. По сути, я хочу, чтобы полоса прокрутки остановилась с верхним полем, равным высоте моего заголовка (т.е. не перекрывалось с заголовком). Я искал бесконечно и не могу найти решение онлайн. Заранее спасибо!
HTML
<div id="wrapper">
<div id="header">STICKY HEADER</div>
<div id="content">CONTENT
<br />CONTENT<br />CONTENT<br />CONTENT <br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT <br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="push"></div>
</div>
CSS
#wrapper {
padding: 0;
height: auto; !important;
position: relative;
margin: 0;
width: 100%;
top:0;
}
#header {
position: fixed;
z-index: 1;
margin: 0;
padding: 0;
left: 0;
height: 40px;
width: 100%;
background-color: blue;
}
#content {
padding: 5px;
padding-top: 44px;
filter: alpha(opacity=50);
max-width: 1105px;
border: 1px solid #333333;
margin-right: auto;
background:#252525;
}
1 ответ
Если я правильно понимаю ваш вопрос, вы можете использовать событие прокрутки jQuery и не пропускать высоту заголовка примерно так: http://jsfiddle.net/2ezQ9/4/
$(window).scroll(function () {
if ($(this).scrollTop() < 58) {
$(this).scrollTop(58);
}
});