Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: скроллим блоки - фиксируем блоки

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Пример: прокручиваем страницу вверх.
Поиск в теме | Версия для печати
join
Отправлено: 03 Сентября, 2011 - 16:13:20
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <title>buchenvalder menu</title>
  6.  
  7.   <style type="text/css">
  8.    #front { width:100%; }
  9.    
  10.    #top_block { width:100%; height:50px }
  11.    
  12.    #header { width:100%; height:200px; position:fixed; }
  13.    .content { width:100%; height:900px }
  14.    .red { background:red }
  15.    .green { background:green }
  16.    .black { background:black }
  17.    .white { color:#fff; text-align:center; }
  18.    .lh { line-height:500px; }
  19.   </style>
  20.   </head>
  21.   <body>
  22.     <div id="front">
  23.      <div id="top_block" class="green white">TOP-block</div>
  24.       <div id="header" class="red white">Header</div>
  25.         <div class="content black white lh">content</div>
  26.     </div><!--end#front-->
  27.   </body>
  28.   </html>


Пример: прокручиваем страницу вверх.
Зелёный блок + черный блок с контентом , прокручиваются вверх.
Красный блок - фиксирован(примерно на расстоянии 50px от верхнего края окна браузера), и остаётся на месте.
Как сделать средствами css ,чтобы при скролле страницы красный блок поднимался
наверх и фиксировался? (всал на место зелёного блока)


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
IllusionMH
Отправлено: 10 Сентября, 2011 - 02:28:27
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
join, как я понимаю, вы хотите чтобы после прокрутки у вас div#header оставался в самом верху.

CODE (javascript):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2.   window.onload = function() {
  3.     var el =  document.getElementById("header"),
  4.         hTop = el.offsetTop;
  5.    
  6.     window.onscroll = function() {
  7.       var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  8.    
  9.       if(scrollTop >= hTop) {
  10.         el.style.position = "fixed";
  11.         el.style.top = "0";
  12.       } else {
  13.         el.style.position = "absolute";
  14.         el.style.top = "auto";
  15.       }
  16.     }
  17.   }
  18. </script>

Вот этот скрипт реализует это, но не уверен что это оптимальное решение.
Все лето не кодил, теперь дрова, а не мозги((
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB