Заставить саму полосу прокрутки прекратить движение вверх (поддельное ограничение), пока 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);
    }
});
Другие вопросы по тегам