Был взят за основу скрипт, переделан под себя - завязал на 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);
}
});
