jQuery прокрутка до div при изменении css (sticky nav)

Question

jQuery прокрутка до div при изменении css (sticky nav)

0

Я использую свой собственный код ниже, чтобы попытаться установить липкий nav.

Его работа, но всякий раз, когда он изменяет div на фиксированный, браузер автоматически прокручивается к нему. Это означает, что браузер не может прокручиваться дальше, чем в исходной навигационной панели.

Есть идеи?

$(document).ready(function() {
    var stickNavOffset = $('#nav').offset().top;

    function sticky() {
        if ($(this).scrollTop() > stickNavOffset-1) {
            $('#nav').css({position:'fixed',left:'auto'});
        } else {
            $('#nav').css({position:'relative',left:'auto'});
        }
    }

    $(window).scroll(function() {
        sticky();
    });
});

Tim Coysh 17 дек. 2013, в 15:31

Источник

0

Мне трудно понять проблему, которую вы описываете. Я быстро поиграл с вашим кодом (всегда хорошая идея при публикации вопроса). Показывает ли это проблему, с которой вы столкнулись? Если нет, то не могли бы вы отрегулировать это так?
Nate 17 дек. 2013, в 15:23
0

И да и нет. Вы правы, и это отлично работает. Но на моем сайте он автоматически прокручивается наверх. Я попробовал это на своем ноутбуке, и проблема не возникает. На моем рабочем столе проблема возникает даже в окне инкогнито. Может ли это быть проблемой браузера?
Tim Coysh 17 дек. 2013, в 15:50
0

Это может быть связано с поведением браузера, но это все еще то, что вам нужно решить. :) Итак: один из основных методов устранения неполадок состоит в том, чтобы изолировать элемент, который вызывает вашу проблему. У нас есть настроенная Fiddle, и у сайта есть проблема. Итак, пришло время начать добавлять больше потенциальных элементов с вашего сайта в скрипку, пока вы не сможете воспроизвести свою проблему. После того, как вы изолировали компонент, который вызывает проблему, вы на 3/4 пути к решению.
Nate 17 дек. 2013, в 16:23
0

Кстати, создание липких элементов немного сложнее: вам нужно учитывать пространство, которое элемент занимал ранее на вашей странице, во-первых, поэтому нет никакого скачка в контенте, когда он переключается в положение: исправлено. Кроме того, очень важно, чтобы функция прокрутки была ограничена по соображениям производительности . Возможно, стоит использовать один из множества плагинов для этого, если только вы не делаете это самостоятельно для целей обучения, и это здорово.
Nate 17 дек. 2013, в 16:33
0

Мне удалось сломать скрипку, не добавляя никаких дополнительных плагинов. Смотрите здесь. Принимая левый атрибут css из jQuery, он может разбить его внутри скрипки. Странно, потому что у сайта есть левые атрибуты и он все еще не работает.
Tim Coysh 17 дек. 2013, в 22:25
0

Также ошибка возникает только тогда, когда окно полностью развернуто (Windows).
Tim Coysh 18 дек. 2013, в 00:18

Показать ещё 4 комментария

Теги:

jquery

css

sticky

fixed

1 ответ

Ещё вопросы

Мне трудно понять проблему, которую вы описываете. Я быстро поиграл с вашим кодом (всегда хорошая идея при публикации вопроса). Показывает ли это проблему, с которой вы столкнулись? Если нет, то не могли бы вы отрегулировать это так?
И да и нет. Вы правы, и это отлично работает. Но на моем сайте он автоматически прокручивается наверх. Я попробовал это на своем ноутбуке, и проблема не возникает. На моем рабочем столе проблема возникает даже в окне инкогнито. Может ли это быть проблемой браузера?
Это может быть связано с поведением браузера, но это все еще то, что вам нужно решить. :) Итак: один из основных методов устранения неполадок состоит в том, чтобы изолировать элемент, который вызывает вашу проблему. У нас есть настроенная Fiddle, и у сайта есть проблема. Итак, пришло время начать добавлять больше потенциальных элементов с вашего сайта в скрипку, пока вы не сможете воспроизвести свою проблему. После того, как вы изолировали компонент, который вызывает проблему, вы на 3/4 пути к решению.
Кстати, создание липких элементов немного сложнее: вам нужно учитывать пространство, которое элемент занимал ранее на вашей странице, во-первых, поэтому нет никакого скачка в контенте, когда он переключается в положение: исправлено. Кроме того, очень важно, чтобы функция прокрутки была ограничена по соображениям производительности . Возможно, стоит использовать один из множества плагинов для этого, если только вы не делаете это самостоятельно для целей обучения, и это здорово.
Мне удалось сломать скрипку, не добавляя никаких дополнительных плагинов. Смотрите здесь. Принимая левый атрибут css из jQuery, он может разбить его внутри скрипки. Странно, потому что у сайта есть левые атрибуты и он все еще не работает.
Также ошибка возникает только тогда, когда окно полностью развернуто (Windows).

Nate · Accepted Answer · 2013-12-17T23-17-00.000Z

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

Поэтому, когда он переключается на фиксированный, вы привязываетесь к вершине, потому что ваш документ не достаточно высок, чтобы прокручивать, что заставляет ваш липкий элемент position: relative снова position: relative, который возвращает полосу прокрутки.

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

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

Это то, что я имел в виду в своем комментарии, когда я сказал, что вам придется учитывать это пространство с вашим кодом. Раньше, когда я создавал липкие элементы, я создавал клонированный элемент-заполнитель, который я оставляю установленным для position: relative который я оставляю на месте, чтобы высота не прыгала.

Отлично! Для тех, кто заинтересован, я добавил <div id="navfiller"> </div> Перед навигацией, с отображением: нет. Когда липкая навигация установлена в положение: исправлено; Я показываю navfiller и скрываю его, когда положение установлено относительно.