papa_s
-
Posts
3 -
Joined
-
Last visited
papa_s's Achievements
Explorer (1/14)
0
Reputation
-
Скролинг fixed позиции, с закрытием другого блока
papa_s replied to papa_s's question in HTML Coding
Как-то моим решением, не плавно получается на мобильных устройствах - (пока не отпустишь палец, блок не перерисует свою позицию). Есть вариант более плавной прокрутки? -
Скролинг fixed позиции, с закрытием другого блока
papa_s replied to papa_s's question in HTML Coding
Есть конечно решение для JS: <script> window.onscroll = function() { if (window.pageYOffset > 0 && window.pageYOffset < 40){ var tmp = 40 - window.pageYOffset; document.getElementById('div2').style.top = tmp+'px'; } else if (window.pageYOffset > 40){ document.getElementById('div2').style.top = '0px'; } } </script> Но хотелось бы уточнить именно насчёт css -
Здравствуйте! Подскажите, пожалуйста, как при скролинге страничке, сделать, что бы div2 вставал на место div1 (т.е. уходил верх)? При скролинге в топ - блоки возвращались на свою позицию. Спасибо! Код на http://cssdeck.com/labs/i1jxnjzh <html> <title>hello word</title> <style> body{ margin:0px; padding:0px; } .div1 { width: 100%; text-align: center; background-color: #e1e1e1; height: 40px; line-height: 40px; } .div2 { width: 100%; text-align: center; background-color: #888888; position: fixed; height: 30px; line-height: 30px; } .div3 { margin-top: 30px; } </style> <head> </head> <body> <div class="div1"> hello, hide me </div> <div class="div2"> scroll me </div> <div class="div3"> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> </div> </body> </html>