Прокрутить боковую панель на x количество, а затем исправить под (также фиксированным) заголовком?

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

[EDIT: Вот скрипка - jsfiddle.net/rqHCx/5]

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

$(function() {
    var side_offset_top = $('#side').offset().top;
    var side = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > side_offset_top) { 
            $('#side').css({ 'position': 'fixed', 'top': 40, 'right': 0 });
        } else {
            $('#side').css({ 'position': 'relative' });
        }   
    };
    side();
    $(window).scroll(function() {
        side();
    });
});

Но при этом боковая панель, конечно, перескакивает прямо в правую часть браузера, но я не хочу указывать значение в пикселях для 'right': px, так как тогда оно будет испорчено с разной шириной экрана.

Как я могу заставить его просто не двигаться по горизонтали и фиксироваться на месте по вертикали после прокрутки к нему?

Кроме того, когда я прокручиваю вверх, появляется поле 40px margin-top, я предполагаю, что мне нужно как-то проверить возврат и удалить его тогда?

Спасибо,


sidebar jquery css-position
person OJFord    schedule 04.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы вычисляете его горизонтальное положение, когда оно является относительным (в его правильном горизонтальном положении), вы можете использовать это число, когда оно зафиксировано. Я добавил верхнее и правое значение, когда он должен вернуться к относительному состоянию, чтобы сбросить его положение.

$(function() {
    var side_offset = $('#side').offset();
    var side_offset_top = side_offset.top;
    var side_offset_right = side_offset.right;
    var side = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > side_offset_top) { 
            $('#side').css({ 'position': 'fixed', 'top': 40, 'right': side_offset_right });
        } else {
            $('#side').css({ 'position': 'relative', 'top': 0, 'right': 0});
        }   
    };
    side();
    $(window).scroll(function() {
        side();
    });
});
person Adam    schedule 05.07.2013
comment
Ой ну спасибо! Я должен был подумать об этом. Д'о. +1 пока, я проверю это, когда вернусь домой. Мне все еще нужно добавить резервную копию чека, чтобы он прокручивался с заголовком правильно? - person OJFord; 05.07.2013
comment
Хорошо.. это на шаг ближе, спасибо. Но когда фиксированная горизонтальная навигация достигает верха, #side начинает прокручиваться по ней, а затем через 40 пикселей снова прыгает вправо, фиксируется и не прокручивается вниз до точки между элементами. Я попробую сделать скрипку, но я никогда не использовал ее раньше. - person OJFord; 05.07.2013
comment
Немного расследования - side_offset_right не работает. Я думаю, это потому, что начальная позиция x не задается CSS, это float:right в оболочке div margin:auto; width:960px;. Я не знаю, почему он прокручивается поверх горизонтальной навигации. - person OJFord; 05.07.2013
comment
Возня с соответствующим кодом, вероятно, облегчила бы мне задачу помочь вам. - person Adam; 05.07.2013
comment
Спасибо за помощь. Смотрите здесь: jsfiddle.net/rqHCx/5 - person OJFord; 05.07.2013

arrow_upward
0
arrow_downward

Наконец-то я понял.

$(function() {
    var ad_offset_right = $('#side-wrap').offset().right;
    var ad = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > 490) { 
            $('.ad300x600').css({'position':'fixed', 'top':40, 'right':ad_offset_right});
        } else {
            $('.ad300x600').css({'position':'relative'});
        }   
    };
    ad();
    $(window).scroll(function() {
        ad();
    });
});

Где 490 пикселей — это расстояние до класса .ad300x600, который я хочу исправить, а 40 пикселей — это высота панели навигации, закрепленная над боковой панелью.

person OJFord    schedule 08.07.2013