DIV прыгает при прокрутке вверх

Question

, пожалуйста, помогите мне, я схожу с ума. У меня есть меню, в котором есть animate = fadeindown и фон ползунка parallax, моя самая большая проблема заключается в том, что заголовок на слайдере прыгает, когда вы прокручиваете вниз и прокручиваете вверх (посмотрите (about.html (МЫ ARE title - когда вы прокрутите вверх заголовок, прыгая, я не знаю, почему это происходит))). Пожалуйста, помогите мне, спасибо заранее.

Answer 1

В будущем было бы немного легче, если бы вы могли вставить код нарушения здесь, в stackoverflow, но это довольно простая проблема, и я могу понять, почему это может быть трудно понять, откуда эта проблема.

Это общая проблема, и это происходит потому, что ваш заголовок .mainmenu-wrapper является частью regular flow, но как только вы применяете position: fixed (когда пользователь прокручиваются на определенное расстояние) выпадает из регулярного потока. Абсолютно или фиксированные элементы позиции вынимаются из обычного потока, поэтому ваш .rev_slider_wrapper «прыгает» вверх по странице, чтобы заполнить пробел, оставшийся .mainmenu-wrapper, когда он станет position: fixed.

Один из способов исправить это применить margin-top равной высоте неподвижного .mainmenu-wrapper класса (~ 180px, если смотреть на устройствах размера рабочего стола) в .rev_slider_wrapper класса только когда .mainmenu-wrapper имеет состояние position: fixed. Таким образом, вертикальное пространство, оставленное .mainmenu-wrapper, когда оно покидает регулярный поток (то есть либо position: fixed, либо absolute), будет размещаться в ваших оставшихся элементах регулярного потока.

Вы могли бы использовать что-то вроде этого в вашем CSS:

Важный бит в приведенном выше селектором является +. Это селектор родственного и будет применяться только стилями, когда .mainmenu-wrapperтакже имеет класс .stricky-fixed (при прокрутке мимо определенной точки) и является родственным .rev_slider_wrapper

Я только что сделал это очень вещь в Chrome Dev Tools и, в то время как он останавливает текст при прыжках, я думаю, вам нужно потратить некоторое время, возможно, поиграть с переходами, чтобы приложение margin-top было немного более изящным.

Обратите внимание, что это решение является самым простым и быстрым, насколько это необходимо минимальному требуемому коду. Однако вы можете применить конкретный класс с margin-top как свойство к .rev_slider_wrapper с тем же JavaScript/jQuery, который обрабатывает приложение класса .stricky-fixed. В любом случае результат один и тот же.