если расстояние между двумя элементами меньше, чем X, сделайте Y

Question

если расстояние между двумя элементами меньше, чем X, сделайте Y

0

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

При меньших разрешениях боковая панель будет прокручиваться поверх нижнего колонтитула. Чтобы решить эту проблему, я хочу скрыть боковую панель, когда она X px из нижнего колонтитула, а затем снова отобразите ее после прокрутки X px над нижним колонтитулом.

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

        distance = sidebar.offset().top - footer.offset().top;

        console.log(distance);

        if ( distance > -500) {
            sidebar.fadeOut('fast');
        } else {
            sidebar.fadeIn('fast');
        }

tctc91 25 сен. 2013, в 15:26

Источник

Теги:

javascript

jquery

offset

1 ответ

Ещё вопросы

KBN · Accepted Answer · 2013-09-25T10-05-00.000Z

Попробуй это.

$(window).scroll(function() {
//changed order, now you won't get negative number
distance = (footer.offset().top - footer.outerHeight() ) - sidebar.offset().top;

if( distance <= 50 ) // 50 or any distance you want
 sidebar.fadeOut(500);
else
 sidebar.fadeIn(500);

});

Добавлена эта часть внутри $(window).scroll() чтобы она проверялась каждый раз при прокрутке.

Кажется, это работает, но похоже, что он рассчитывает расстояние от нижнего колонтитула, а не от верхнего. Должно ли смещение не начинаться с вершины элемента?
Я не уверен в этом, но если это проблема, я отредактирую ответ, чтобы исправить эту проблему (вычитая высоту нижнего колонтитула).