Фиксация DIV при скролле. Дайте совет.
Был взят за основу скрипт, переделан под себя - завязал на margin-top.
Задача была: при скролле, левая колонка доезжает до футера и встает. Итог: до футера она доезжает, встает, но: футер пропадает и непонятный дрыг. Лицезреть сие можно: тут Как видим, к стилю aside добавляется style="margin-top. Но отчет начинается не с нуля, а с неведомо откуда взявшегося значения "31px". Есть кто вразумит советом? Или предложит альтернативный вариант решения вопроса. Сразу оговорюсь, в js не особо силен. Собственно, сабж: $(document).ready(function(){ // определяем константы var el = $('#column-left'); var max_down = $('#footer').outerHeight(true); var doc = $(document); var win = $(window); var el_top = el.offset().top; var head_h = $('#header').height(); var main_position = { 'margin-top': el.css('marginTop') } // задаем начальное позиционированние элементу el.css(main_position); // только в случае если высота документа больше чем высота левой колонки if(doc.height() - max_down > el_top + el.height()) { // для определения в какую сторону был скролл var up_down = 0; // вешаем событие на скролл $(window).scroll(function () { // если проскроллили до элемента if (doc.scrollTop() >= el_top) { // скролл вниз if (is_down()) { // если нижняя граница элемента выше чем нижняя граница экрана if (el.offset().top + el.height() < doc.scrollTop() + win.height()) { // определяем высоту ниже которой нельзя опускать var max_top = doc.height() - max_down - el.height(); // если элемент меньше экрана пользвоателя // то просто привязываем его к верху страницы if (win.height() > el.height()) { var top = doc.scrollTop(); } else { var top = doc.scrollTop() - (el.height() - win.height()); } // если высота ниже максимальной if (top > max_top) { top = max_top; } el.css({ 'margin-top': top - head_h + 'px' }); } } else { // если высота проскролености меньше верха элементка if (doc.scrollTop() < el.offset().top) { el.css({ 'margin-top': doc.scrollTop() - head_h + 'px' }); } } } else { // если до верха элемента недоскролили el.css({ 'margin-top': el_top - head_h + 'px' }); } }); // определяем вниз ли был скролл function is_down() { var is_up = doc.scrollTop() > up_down; up_down = doc.scrollTop(); return is_up; } } else { // если высота документа меньше левой колонки то присваиваем ему старый css el.css(main_position); } }); |
|
Часовой пояс GMT +3, время: 23:29. |