Фиксированный div дергается при вертикальной прокрутке как избавиться от дрожания

Блок прыгает во время скролла с добавлением position: fixed — исправляем проблему

Условия возникновения проблемы прыжков блока с position: fixed:

• Есть меню, которое при скролле должно прилипать к верху экрана
• Есть скрипт JQuery, который определяет позицию меню nav во время скролла и добавляет класс со стилем position: fixed

Проблема заключается в том, что во время скролла когда блок достигает нужной позиции для получения нового класса со стилем position: fixed, класс начинает непрерывно сбрасываться. Визуально это выглядит как прыжки блока.

Скажу сразу, если скрипт корректно определяет позицию и в нужный момент добавляет класс, значит работает правильно и дело не в нём. Будем копать в сторону стилей CSS и HTML верстки блока, который нужно фиксировать. Итак решение проблемы прыжков блока при фиксации:

• Модернизируем меню, приведённое в качестве примера фиксированного блока во время скролла — добавляем внутри div блок:
• Скрипт переопределяем на добавление класса div блоку .nav-menu, а не общему блоку nav
• Блоку nav задаём высоту с помощью стиля height. Блоку nav-menu задаём такую же самую высоту и стиль line-height с значением как и у height.

Готовое решение рабочей фиксации блока при скролле страницы можно найти в ЭТОЙ СТАТЬЕ.

Источник

При прокрутке, дергается див с позицией fixed

Здравствуйте
Есть таблица html с шапкой. При прокрутке — шапка таблицы фиксируется вверху окна браузера.
Но есть проблема:
если окно браузера сделать по высоте таблицы (с шапкой) и попробовать прокрутить вниз — шапка при прокрутке «дергается» — быстро меняется с fixed на static
Вот тестовая страница

Костыли типа — сделать побольше высоту боди или большой отступ в низу таблицы – не подходят.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Как скрыть элемент див при клике на другой див?
Есть див с id и у див есть фон с картинкой, мне надо, чтобы при клике на него скрывался другой.

Дергается фон при прокрутке страницы в Internet Explorer
Здравствуйте! Установил фоновую картинку с параметром fixed, так вот в IE при прокрутке страницы.

Изменение цвета fixed-блока при прокрутке сайта
Собственно есть сайт. Шапка сайта содержит прозрачное меню с белым текстом. Как сделать так.

Родительский элемент блока див с position:fixed блокируется, как сделать чтобы не блокировался?
Родительский элемент блока див с position:fixed блокируется, как сделать чтобы не блокировался? а.

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

Див прячется под другой див
Ребята такие дела, при добавлении в один див контента, он расширяется автоматически и залазит под.

Дергается меню при наведении мышки
Создал меню в бутстрап мышка наведена на средний пункт и он дернулся потому что появилась.

Источник

Блог Vaden Pro

Убираем «дергание» сайта у страниц со скроллом и без него

Суть проблемы

Скролл или полоса прокрутки – это инструмент, посредством которого прокручивается страница с контентом для отображения тех его зон, которые находятся вне видимости первого экрана.

Появление скролла в обычной практике происходит по решению браузера, когда все содержимое страницы не помещается в видимую область пользователя. Возможно появление полосы прокрутки по вертикали и горизонтали. При появлении полосы вся страница слегка смещается в левую сторону (в зависимости от стороны появления скролла), так как она резервирует за собой определенное место. Обычно ширина стандартной полосы не превышает 20 пикселей.

Такой эффект на профессиональном сленге называется «дергание сайта», запомните это и не теряйтесь, когда снова столкнетесь с этим специфическим термином. Воочию этот эффект виден при переходе со страницы без скролла на страницу на которой он есть. Выглядит это действительно как небольшое подергивание.

Предлагаемое решение

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

Источник

Как убрать подёргивание элементов с position:fixed при скролле в IE (включая 11)?

Некоторые элементы с position:fixed в IE просто адово дёргаются при скролле. Т.е. сначала всё же начинают скроллится, и только потом возвращаются на место. Есть ли возможность сгладить скролл?
Пару лет назад сталкивался с подобной проблемой, и нашёл свойство, которое её решало, но сейчас найти то решение не могу. Может кто подскажет?

P.S. Подозреваю, что корень проблемы в совокупности position:fixed и отрицательного z-index, т.к. именно сейчас проблема проявляется при установке блока фоном страницы. В блоке слайдер, сначала грешил на него, но при замене слайдера на простое изображение проблема остаётся.

• Вопрос задан более трёх лет назад
• 1859 просмотров

Вы наверняка сидите на Windows 8?

Если коротко, не так давно столкнулся с такой же проблемой, она возникает у всех пользователей с Windows 8, в связи с тем, что в IE по умолчанию включено свойство плавного скролла и оно сильно глючит если у блока есть фоновая картинка.

Вот кстати где можно подробнее про это почитать
ссылка на microsoft

У меня возникла эта проблема месяца 4 назад, красивого решения этой проблемы не было.
Я нашёл только 2 решения:
1) Закрыть на это глаза и надеяться что для windows 8 выйдет обнова с исправлением бага
2) Проверять юзер агент браузера, и подменять стили. А в стилях переопределять свойства, заменив fixed на absolute. И при скролле с помощью js, менять top

Источник

Полноценный fixed в MSIE 26 марта 2007

	Задача.	Показать то, чего не хватает способам эмуляции CSS-правила position: fixed.

О том, какой код нужно написать для MSIE в стилях страницы, чтобы сделать блок с фиксированной позицией, давно известно. Технологи студии пользуются разными способами решения этой задачи — каждый своим любимым.

Простая идея
Общая идея неизменна: нужно записать в CSS выражение, которое браузер станет вычислять при любом изменении размеров или положения страницы:

Но такой простейший вариант не работает, чего и появились три разных способа обойти это:

1. с функцией eval():

3. с функцией parseInt():

Этот блок остается на месте при вертикальной прокрутке и
дрожит
не дрожит
в MSIE.

Важный довесок
Эмуляция свойства position: fixed удалась, но удовлетворения от этого еще нет, потому что «фиксированный» блок дергается при вертикальной прокрутке.

Решение, придуманное Ромой Воронежским и Юрой Васильчиковым, непостижимо и просто — чтобы избавиться от дрожаний, нужно зафиксировать фон страницы:

Файл n.gif — однопиксельная прозрачная картинка (ее, кстати, даже не обязательно держать на сервере).

Показанный прием одинаково хорошо работает в браузерах MSIE уже начиная с пятой версии.

Примечание. Нужно лишь помнить, что для MSIE 7 есть более простое решение для правильной работы свойства fixed — указание доктайпа.

Источник