Как сделать меню которое при скроле вверх показывается?

Question

[Александр Решетняк]

Сделал меню которое при прокрутке вверх показывается, но оно мне не нравится) Так как использовал абсолютное позиционирование. Какое есть более изящное решение с тем же функционалом, но без применения position:absolute

пример тем кому нравится codepen.io/Vampireos/pen/NAEVgz
или кому больше по душе jsfiddle.net/Vampireos/9fbr320y/57

Comments

[sergey]

как-то странно и не логично

[Александр Решетняк]

SM: всегда готов выслушать идеи как удобнее предоставить меню пользователю, не загромождая при этом экран. И чтобы было универсально начиная от ширины экрана 320px^ ^

Answer 1

[Александр Аксентьев]

А какие еще варианты?
По другому никак скорее всего.

Вообще это очень странное поведение, оно уж тогда либо всегда должно показываться, либо только вверху сайта. А так чтобы при скролле вверх появлялось очень непонятно. Ни разу такое не встречал и как-то неудобно что ли... Не очевидно для пользователя.

Comments

[Александр Решетняк]

Вариантов много, просто хотелось бы посмотреть интерпретацию от профи.

Не наоборот, отпадает в необходимости в кнопке вверх, так как многие наверх идут именно за меню
..ну и не очевидно до первого скрола вверх) и довольно таки распространено среди правильных сайтов ведь удобно же

[Александр Аксентьев]

Александр Vampireos: "классический" вариант для обычных сайтов: https://getbootstrap.com/examples/navbar-fixed-top/
На лендингах меню как правило трансформируется в более компактное при скролле, но не исчезает совсем.

Скролить наверх на андроиде например вообще не люблю, потому что начинает вылезать адресная строка(которая скрывается при скролле вниз) и занимать много полезного места.
А если будет вылезать меню и адресная строка сразу, то получится непонятно что вообще.
Ну тут на вкус и цвет в общем-то...

[Александр Решетняк]

Александр Аксентьев: такие популярные сайты как redbull.ru hongiat.com и непонимают чего не понятного та)
..я пришёл к таком выбору так как это наиболее логический вариант который не ломает шаблон и понятен всем на тестовом сайте я также сделал меню которое в зависимости от ширина экрана убирается дроп. И вместе они сила) test.vampireos.ru

[Андрей Верх]

Это не "логический" вариант, а фуфло. Надо предугадывать что хочет пользователь, а не действовать по факту. Это всё равно что показывать кнопку "наверх", только когда ты начнёш сам скроллить наверх...Бредовая идея. Нужно или всегда показывать меню или показывать когда страница проскроллена на X процентов.

[Ankhena]

Что за странная идея показывать меню, только при начале скролла вверх?

Смысл плавающего меню в том, чтобы оно ВСЕГДА было видно/доступно посетителю. Можно не целиком, можно от него только гамбургер или просто более компактный вид панельки, но должно быть понятно, что оно есть.

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

[Ankhena]

И со смартфона на редбуле появление меню вообще за гранью логики для обычных пользователей