Как создать фиксированную / липкую боковую панель в CSS / JS?

Question

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

Я видел два подхода к этому:

1. position:fixed;
2. манипулирование JavaScript с помощьюDOM

Подход №.1, насколько я знаю, будет проблема, когда область просмотра меньше, чем содержимое боковой панели, поэтому я думаю, что это не может быть использовано надежно, а сценарии JavaScript, которые я видел, обычно анимированы или, как правило, «медленные» (вы можете увидетьчто после каждой прокрутки происходит перерисовка.)

Может ли кто-нибудь указать на подход библиотеки JavScript / CSS, который не пострадает от вышеупомянутых проблем?

Редактировать :Примером может служить эта страница , но с боковой панелью, торчащей вверх без анимации и корректно обрабатывающей ситуацию, когда боковая панель выше, чем content / viewport.

Answer 1

Мне не нравятся тяжелые решения JS, поэтому важно спросить - предпочтительная совместимость.В IE8 + можно вместо

var $window = $(window),
    $sidebar = $(sidebar);

$window.on('resize', function(){
    $sidebar.height($window.innerHeight());
});

$window.resize();

сделать что-то вроде этого (чистое решение CSS):

#sidebar {
    position: fixed;
    left: 0; /* or right */
    top: 0;
    bottom: 0;
    overflow: auto;
}

Когда вы одновременно используете верхнее, нижнее, левое и правое значения, поле будетрастягиваются.( JSFiddle demo )

Answer 2

Понял. Он основан на Javascript, но я уверен, что в этом нет ничего тяжелого, и даже IE8 должен решить эту проблему довольно хорошо.

var top = $('#sidebar').offset().top;
var height = $('#sidebar').height();
var winHeight = $(window).height();
var gap = 10;
$(window).scroll(function(event) {
    var scrollTop = $(this).scrollTop();

    // sidebar reached the (end - viewport height)
    if (scrollTop + winHeight >= top + height + gap) {
        // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation
        $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px');
    } else {
        // otherwise remove it
        $('#sidebar').removeClass('fixed').css('top', '0px');
    }
});​

демо

Answer 3

Не уверен, что вы поняли это, но я создал плагин jQuery с липкой боковой панелью. Это действительно просто и позволяет вам вызывать только одну строку jQuery. Посмотрите здесь: http://mojotech.github.com/stickymojo/

начинается с позиции: исправлено; затем использует javascript для обработки любых изменений размера, прокручивает и даже позволяет указать элемент нижнего колонтитула, который он не должен пересекать. Комбинируя эти подходы, вы получите гладко выглядящий фиксированный элемент. Кроме того, мы сделали это легко для вас.

Answer 4

Вы можете отследить высоту окна клиента и задать ее на боковой панели следующим образом:

var sidebarHeight = $(window).innerHeight();

$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​

При правильном CSS для боковой панели:

#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    overflow: hidden;
}

Вотработает JSFiddle.

Вы также можете наблюдать за изменением размера окна, чтобы избежать путаницы при изменении размера :) Вот способ пойти с jQuery

Удачи

Answer 5

Код и демо здесь: http://closure -library.googlecode.com / svn / docs / class_goog_ui_ScrollFloater.html