КАК сделать плавающий блок сбоку?
Рет қаралды 6,581
4 жыл бұрынКак и обещал на прошлой неделе - показываю как сделать плавающий блок сбоку. Реализация во многом схожа с разработкой плавающей шапки, но есть нюансы.
Во-первых - данный блок позиционируется сбоку и он становится fixed и от этого мы теряем его ширину... Надо её как-то вернуть!
Во-вторых - при определенных ситуациях данный блок может "наезжать" на футер или какой-то другой блок, который находится снизу. Следовательно, это тоже нужно предусмотреть.
И, как и в прошлом видео, я буду использовать jQuery (на нём писать проще и быстрее, вы можете написать на чистом JavaScript. Логика будет та же), HTML, CSS.
@prosto_razrabotka 3 жыл бұрын
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@shazplay8878 4 жыл бұрын
Превью пушка! Контент невероятно полезный! 😍
@prosto_razrabotka 4 жыл бұрын
Спасибо -)
@kotlancer 3 жыл бұрын
Просто пушка! Супер доходчиво, спасибо огромное!!
@user-tr8xi3ik3c 4 жыл бұрын
Контент топовый. Я плохо разбираюсь в верстке, знаю в основном только backend, но все очень понятно даже мне. Как бы хорошо приложение не работало под капотом, без хорошего внешнего вида никуда. Нужно будет ранние видео автора посмотреть и использовать в своем приложении на Rails 6.
@prosto_razrabotka 4 жыл бұрын
Спасибо
@prosto_razrabotka 4 жыл бұрын
Вроде всё с прилипающими и плавающими шапками, навигациями, блоками -) Как вам?) P. S. У меня вот прямо сейчас возникла ещё одна идея. В некоторых ситуациях, возможно даже абсолют не понадобиться, а блок можно будет отпозиционировать в конец с помощью флекса. Можете сами попробовать такой вариант.
@user-tr8xi3ik3c 4 жыл бұрын
Очень наглядно, понятно и профессионально подан материал. Чувствуется, что автор профессионал своего дела.
@it_stylecorp.7694 4 жыл бұрын
а почему не использовать для блока (.aside-fixed--top), box-sizing: border-box; , когда когда он расползается (метод 2 с JS).
@alex_cherniienko Жыл бұрын
Есть изьян в данном методе, который я пока не смог устранить. Вернее не изьян, а недоработка. Есть проблема в ситуации когда сайдбар (правый блок) больше высоты экрана. В таком случаи прилипание должно срабатывать по достижению экрана нижней части сайдбара. Как этого достичь, пока не понимаю.
@alekseib7462 4 жыл бұрын
Спасибо!
@prosto_razrabotka 4 жыл бұрын
Не за что -)
@cvVerf 4 жыл бұрын
А планируете ли вы снимать ролики по разработке UI компонентов, таких как: accordion, tab menu, slider, drag'n'drop и тому подобное?
@prosto_razrabotka 4 жыл бұрын
Кое что из перечисленного скорее всего будет уже на следующей неделе -)
@user-rl7hx6df9f 4 жыл бұрын
Добрый день, Виталий. Вы отлично и понятно рассказываете, если позволите, одно пожелание: чуть подробнее в начале ролика описывайте функционал фичи, которую в этом ролике разбираете) Благодарю заранее) P.S. Обратите внимание на сайдбар на главной странице хабра) Есть шанс увидеть на канале реализацию подобного сайдбара без плагинов?)
@user-yb9uf8uz8k 4 жыл бұрын
Большое спасибо за урок - опираясь на вашу логику написал свой код переопределив классы с fixed на absolute, всё отлично заработало. Единственное не удалось подобный блок сделать для сайта на Bootstrap - там на каждом шагу всё рушиться и непонятно как быть.
@nexgenua 4 жыл бұрын
Плавающий блок есть, осталось сделать летающий блок!
@alexandrsachishin962 4 жыл бұрын
13:00 - почему не задать футеру з-индекс?
@borismakhmudov896 4 жыл бұрын
А как сделать как у вк? И да пожалуйста пиши на редакторе, а то слишком маленькие квадратики что бы понимать что ты пишешь)
@Eugenii2233 4 жыл бұрын
Position sticky и родительский блок по высоте делаешь ( контента либо страницы ) и все.
@borismakhmudov896 4 жыл бұрын
@@Eugenii2233 какой поситион стик? я про сайдбар в котором если высота блока больше высоты экрана экрана то он фиксируеться когда всё про скролит, эта далеко не поситион стик))) там сложный алгоритм
@cvVerf 4 жыл бұрын
15:55 А почему нельзя было задать родителю-wrapper'у position: relative, вместо fixed а плавающему блоку position: absolute; bottom: 0; ?
@prosto_razrabotka 4 жыл бұрын
Плавать по экрану не будет. Оно просто упадёт вниз
@prosto_razrabotka 4 жыл бұрын
Хотя, вы правы. Для кейса, где нужно чтоб оно "прилипло" к низу, такое сработает. Более того, это натолкнуло меня на другую мысль - это можно и просто флексом прибить к низу, если правильно растянуть родительские контейнеры
@cvVerf 4 жыл бұрын
@@prosto_razrabotka я говорю про случай, когда внизу плавающий блок должен "прилипнуть" к низу content__right. Почему он упадет вниз, если у нашего content__right position будет relative, а у его child'a position: absolute, bottom: 0. Хотя, возможно, в таком случае придется много стилей оверрайдить, т.к. у нас тройная вложенность в этом примере - wrapper-inner, wrapper-outer и тд
@prosto_razrabotka 4 жыл бұрын
Не придется, абсолют же ищет ближайшего родителя с релативом/абсолютом/фикседом и если ближайший будет content__right, то по идее всё будет ровно -)
@amirych 4 жыл бұрын
Снова jquery. position: sticky еще вроде не работает, если у какого-то из родителей есть overflow: hidden
@prosto_razrabotka 4 жыл бұрын
Да, а ещё он будет дальше и на то есть 1000 и 1 причина.
@amirych 4 жыл бұрын
@@prosto_razrabotka какая причина? Скрыть от людей реализацию dom api?
@prosto_razrabotka 4 жыл бұрын
Больше половины сайтов в интернете используют jQuery - и это надо поддерживать. Нельзя просто так взять и выпилить либу, особенно если на ней завязан весь проект Куча студий / фриланс заказов Сейчас делают сайты, которые используют jQuery. Следовательно с ним надо уметь работать. На компьютере пользователя скорее всего уже есть жикверя, так что если подключить с проверкой, то она даже грузится не будет. jQuery изначально был сделан для чего? Для работы с DOM (и + кроссбраузерность). А что я тут делаю? Работаю с ДОМом...
@Eugenii2233 4 жыл бұрын
@@prosto_razrabotka не соглашусь с тем , что большинство используют jquery
@Eugenii2233 4 жыл бұрын
Sticky работает, просто надо посмотреть документацию как его правильно применять.
@Eugenii2233 4 жыл бұрын
Было круто , однако существует position : sticky для этого .... и не надо столько кода писать... и нагрузку делаешь .... ясно
Просто: разработка
Рет қаралды 31 М.
Tony Installer
Рет қаралды 1,8 МЛН
Просто: разработка
Рет қаралды 39 М.