Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.10.2016, 05:53
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Плавающий фиксированный блок.
Привет! Помогите разобраться как это сделать.

Вариант 1.
Есть 3 блока.
block1 {position:relative; height:500px;}
block2 {position:fixed; bottom:0; height:50px; width:100%;}
block3 {position:relative; height:300px;}
Нужно чтобы при прокрутке вниз, как только блок 3 появился внизу страницы, добавить блоку 2 стиль position:relative. И наоборот, как только при прокрутке вверх, скрывался блок 3, изменить position на fixed блока 2.

Есть вот такой скрипт, все работает, но в нем смена стиля зависит от расстояния прокрутки. Но он не походит т.к. высота block1 на разных страницах будет разная.

<script type="text/javascript">
var menu = document.getElementById('block2');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll < '300'){
block2.style.position = 'fixed';
}else{
block2.style.position = 'relative';
}
}
</script>


Вариант 2.
Как в примере ниже (блок с кнопкой купить и ценой), но тут как я понял такой блок не фиксированный, а абсолютный. И он меняет родительский блок. Что и дает нужный эффект.

Пример: http://m.zara.com/ru/ru/женщин...2p3829064.html

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

Последний раз редактировалось EvgenyTryap, 17.10.2016 в 13:14.
Ответить с цитированием
  #2 (permalink)  
Старый 17.10.2016, 09:26
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от EvgenyTryap
кто-нибудь знает как это сделать
Перехватывать событие скролирования... Считать размеры... В нужном случае менять ЦСС-свойства или назначать нужные классы нужным элементам...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающий блок, замирающий над футером Navaho Элементы интерфейса 69 24.06.2020 23:53
Плавающий блок на чистом JS "дергается" Gedonist Общие вопросы Javascript 0 16.05.2016 20:14
Фиксированный блок неверно 'отлипает' BoJITyH Элементы интерфейса 0 13.02.2016 21:20
Фиксированный блок. И относительный контент. TylerDurden Общие вопросы Javascript 3 16.11.2012 18:24
Фиксированный блок kakarotto Элементы интерфейса 2 09.07.2010 00:20