Аватар для Flashik
7 / 7 / 1
Регистрация: 16.03.2013
Сообщений: 92
1

Fixed позиция блока после достижения позиции в браузере

03.07.2015, 23:57. Показов 615. Ответов 0
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Прошу помочь с решением задачи. Собственно, есть маленький блок (#smallblock), который находиться в блоке header. Его позиция - левый нижний угол. Параметры header - это 100% ширины и 100vh (высота по высоте окна монитора). Когда человек проскроллит страницу вниз и когда этот маленький блок (#smallblock) окажется в левом верхнем углу - нужно сделать так, что бы он там и остался (остался в левом верхнем углу экрана). Тоесть имел fixed позицию на протяжении всего скролла до конца страницы. Если человек вернется назад на header, то блок должен отменить свои fixed параметры и при нахождении окна браузера на блоке header - он оставался в левом нижнем углу этого блока. Спасибо.

CSS
1
2
3
4
5
6
7
8
header {
  position: relative;
}
#smallblock {
  position: absolute;
  bottom: 0;
  left:0;
}
HTML5
1
2
3
4
<header>
<div id='smallblock'>navigation</div>
<div id='text'>bla bla bla</div>
</header>
0
03.07.2015, 23:57
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
03.07.2015, 23:57
Ответы с готовыми решениями:

Проблемы с блоком в позиции fixed
Добрый день. Создала небольшой одностраничный сайт stimcleanultra, переход по меню с помощью якорей. Все просто, никаких скриптов. Но по...

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

Три блока, центральный fixed
Всем привет, подскажите как сделать шапку тремя дивами в одну строку, чтобы средний был фиксированного размера(200px), остальные резиновые...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
03.07.2015, 23:57
Помогаю со студенческими работами здесь

Перемещение fixed блока с ограничением
Страница поделена на 2 части. В правой части &lt;div&gt; с position: fixed; Соответственно при прокручивание страницы, фиксированный блок...

Позиционирование блока со свойством fixed
Здравствуйте, есть стиль width:100%; position:fixed; top:142px; left:300px; height:100%; Получается что из за позиции...

Position fixed кнопки внутри блока
Коллеги, доброго времени суток, делаю макет и встал на не понятном до селе мне моменте. Суть такая, есть верстка (модальное окно): ...

Отталкивание блоков от блока со свойством position fixed
Можно ли как то реализовать чтобы от блока со свойством position:fixed( в моём случае это боковая панель) сделать чтобы от него...

Position: fixed - сделать размеры блока как у body
Есть страница, body { max-width: 1200px; margin: auto; } Т.е. контент посередине. Вопрос: есть блок...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Использование кэша Laravel - полный гайд
bytestream 18.02.2025
Кэширование - один из наиболее эффективных способов повышения производительности веб-приложений. В современном мире, где скорость загрузки страниц напрямую влияет на удержание пользователей и. . .
Создаем REST API в Laravel с аутентификацией через Passport
bytestream 18.02.2025
Разработка современных веб-приложений все чаще требует создания надежного и хорошо структурированного API. REST API стал стандартом де-факто для построения взаимодействия между клиентской и серверной. . .
Пайплайны в Laravel - полный гайд
bytestream 18.02.2025
Разработка современных веб-приложений часто требует обработки сложных процессов, состоящих из множества последовательных шагов. Например, при создании системы комментариев может потребоваться. . .
Как правильно использовать @required в Symfony
bytestream 18.02.2025
При разработке приложений на Symfony мы часто сталкиваемся с необходимостью внедрения зависимостей. Фреймворк предоставляет несколько способов управления этим процессом, и одним из таких инструментов. . .
Система безопасности в Laravel: возможности и примеры
Wired 18.02.2025
Каждый день появляются новые виды атак и уязвимостей, которые могут поставить под угрозу конфиденциальные данные пользователей и функционирование всей системы. В этом контексте выбор надежного. . .
Давайте сравним Django и Laravel
Wired 18.02.2025
Django и Laravel - два мощных инструмента, которые часто сравнивают между собой. Оба фреймворка предлагают разработчикам богатый набор возможностей для создания масштабируемых веб-приложений, но. . .
Laravel или React - что лучше?
Wired 18.02.2025
В разработке веб выбор правильного инструмента часто определяет успех всего проекта. Особенно интересным представляется сравнение Laravel и React - двух популярных технологий, которые часто. . .
Laravel 11: новые возможности, гайд по обновлению
Wired 18.02.2025
Laravel 11 - это новая масштабная версия одного из самых популярных PHP-фреймворков, выпущенная в марте 2024 года. Эта версия продолжает традицию внедрения передовых технологий и методологий. . .
Миграции в Laravel
Wired 18.02.2025
Разработка веб-приложений на Laravel неразрывно связана с управлением структурой базы данных. При работе над проектом часто возникает необходимость вносить изменения в схему базы данных - добавлять. . .
Аутентификация в Laravel
Wired 18.02.2025
В современном мире веб-разработки безопасность пользовательских данных становится критически важным аспектом любого приложения. Laravel, как один из самых популярных PHP-фреймворков, предоставляет. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru