JS-решения №15. Фиксированная шапка при скролле вниз и вверх

Поделиться
HTML-код
  • Опубликовано: 30 ноя 2024

Комментарии • 48

  • @yusif4183
    @yusif4183 3 года назад +1

    Отлично видео, редко касаются тем которые действительно затрудняют начинающих.Спасибо за полезную и важную информацию.

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @Sergey_Klimov
    @Sergey_Klimov 8 месяцев назад +1

    Круто, и теперь браузер будет вызывать функцию на каждое событие скрола, что очень бьет по производительности.

  • @ЮраЧуб-и8й
    @ЮраЧуб-и8й 3 года назад +1

    Просто понятно и со вкусом.
    Удачного развития.))))))))))

  • @OskarPrice
    @OskarPrice 3 года назад +2

    Топовый канал с топовым контентом)

    • @maxgraph
      @maxgraph  3 года назад +1

      спасибо)

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 Год назад

    круто! Помогло ! header fixed
    Класс

  • @ShocKKKKKKK
    @ShocKKKKKKK 3 года назад +2

    Еще даже не вышло, но лайк влепил))

  • @ФранцузРусский-ы2ш
    @ФранцузРусский-ы2ш 3 года назад

    Макс,красавчик! Всегда лайк!

  • @hmutyikoot4454
    @hmutyikoot4454 3 года назад

    Очень интересные видео и частенько что-то беру из них! Но есть пару просьб, пожеланий.
    1. Лучше бы в самом начале видео показать то, что вы будете делать)
    2. Когда получается какая-то ошибка в коде и вы начинаете исправлять, то за этим не всегда хочется смотреть) было бы здорово, если бы в похожих видео было все четко)
    Ну и побольше бы такой рубрики!
    Спасибо)

    • @maxgraph
      @maxgraph  3 года назад

      Спасибо

    • @dmitriykarabasov1440
      @dmitriykarabasov1440 2 года назад +2

      Не согласен. Сама логика поиска ошибки много чему учит

  • @Alex-My-reverence
    @Alex-My-reverence 3 года назад

    👍👍👍

  • @TheError220
    @TheError220 3 года назад +6

    Мне показалось некрасивым, что как только чуть крутнул вверх, вылазит шапка, поэтому я начал делать небольшой люфт на скрытие и показ шапки. + красивее когда шапка не просто появляется а выезжает сверху. Накидал пример в кодепене для демонстрации. Не знаю разрешишь ли ссылку, но вот codepen.io/spock51119/pen/bGgadXd

  • @nmteg
    @nmteg 2 года назад

    Спасибо, очень помогло!)

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @deniskotov
    @deniskotov 3 года назад

    Видос супер! очень полезно) Спасибо!)

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @sergeykostik1887
    @sergeykostik1887 3 года назад +1

    Лайк улетел)

  • @sergeykostik1887
    @sergeykostik1887 3 года назад +1

    Можно более распространёный вариант, когда сверху меню соц, а ниже ее сама шапка, и при скроле что бы осталась толька шапка?

    • @maxgraph
      @maxgraph  3 года назад

      Ну здесь то же самое, просто нужно смотреть на отступ сверху)

  • @АлександрМелянюк-ц9ю

    Спасибо!
    Макс, а в плейлисте UI-компоненты не появится видео по фильтрам (много фильтров) товаров!?

    • @maxgraph
      @maxgraph  3 года назад +1

      Привет, а зачем?) Это задача бэкенда, по идее.

    • @АлександрМелянюк-ц9ю
      @АлександрМелянюк-ц9ю 3 года назад

      @@maxgraph Ну так, чтобы на канале всё можно было найти) Ну, ладно, как карта уже ляжет) Просто коммент всё равно нужно было написать, вроде как положительно на канал влияет)

  • @ВероникаЧернобай-ъ8л

    Максим, спасибо за видео! Скажите, что делать когда футер прижат к низу через флекс html,body,wrapper - 100%, scroll не работает? Как исправить что бы при 100% он заработал

    • @maxgraph
      @maxgraph  2 года назад

      Здравствуйте. Так сходу сказать сложно, надо посмотреть

  • @NivaiZRUS
    @NivaiZRUS 2 года назад

    Привет. Есть вопрос по коду. Это начинает срабатывать при скролле, а как быть если при обновлений страницы? Вот я дошёл до середины, обновил страницу, и шапка не появится пока не будет скролла, как можно доработать это место?

    • @maxgraph
      @maxgraph  2 года назад

      Нужно обернуть код в функцию и вызвать её и просто в коде, и в скролле

  • @nadyashaymardanova6000
    @nadyashaymardanova6000 Год назад

    🙆

  • @ВадимЯковенко-я1в
    @ВадимЯковенко-я1в 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

      Скрывать нет смысла) показывать будем

  • @deniskotov
    @deniskotov 3 года назад

    Макс, привет, я новичок. Скажи, пожалуйста, насколько актуально сегодня весь код js писать в обработчике по событию DOMContentLoaded или их аналогах? Раньше всё писали в jQuery функции ready(). Насколько актуально сегодня так делать?

    • @maxgraph
      @maxgraph  3 года назад

      Да, дом контент лоадед полезен)

    • @deniskotov
      @deniskotov 3 года назад

      @@maxgraph а почему нынче блогеры перестали всё оборачивать в этот обработчик? Для скорости видоса?

    • @maxgraph
      @maxgraph  3 года назад +1

      Да как-то забывается))

  • @aaffbdefdfab
    @aaffbdefdfab 2 года назад

    Как сделать так, чтобы хедер при скролле вверх не сразу появлялся, а только через заданное количество прокрученных пикселей?

    • @maxgraph
      @maxgraph  2 года назад

      Написать скрипт надо
      Так сходу не сказать)

    • @aaffbdefdfab
      @aaffbdefdfab 2 года назад

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

    • @aaffbdefdfab
      @aaffbdefdfab 2 года назад

      @@maxgraph js я плохо понимаю, не могу скрипт написать, поэтому прошу помощи тут.

  • @danielkhachaturian
    @danielkhachaturian 3 года назад

    position: sticky? Не, не слышали
    Да?)

    • @maxgraph
      @maxgraph  3 года назад

      Слышали. Но он так не умеет)

    • @danielkhachaturian
      @danielkhachaturian 3 года назад

      @@maxgraph ну сделать фиксированную шапку при скролле он умеет

    • @maxgraph
      @maxgraph  3 года назад +1

      Знаю. Видео на канале есть)
      Но то что в видео не умеет

    • @MrIncredible-mu5ec
      @MrIncredible-mu5ec Год назад

      @@maxgraph intersection observer вышел из чата