Изменение рамки
Добрый день всем, столкнулся с такой проблемой.
Есть страничка, на страничке есть тег <header></header>, у которого id="header". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, minimal-scale=1, maximal-scale=1, user-scalable=no"> <link type="text/css" rel="stylesheet" href="/patterns/css/stylesheet.css"> <link type="text/css" rel="stylesheet" href="/patterns/css/mobilestylesheet.css" media="(max-width: 600px)"> <title>Новости | Code In Road</title> <script src="/patterns/js/preloader.js"></script> <?php session_start(); $RF = $_SERVER['DOCUMENT_ROOT']; include("$RF/libs/connect_main.php"); include("$RF/libs/global_functions.php"); $return = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?> </head> <body onload="test()"> <?php showAdminBar(); showConfirmTable(); include("$RF/patterns/header.php"); ?> <center><div class="container"> <div class="left"> <h1>Кто? Что? Зачем?</h1> <p>Создание сайта в 21 веке очень популярное занятие. А главное - умелые мастера зарабатывают на этом неплохие деньги. С чего же начать?</p> <p>Когда я начинал изучать основы сайтостроения, я никогда не мог нйти какого-то определенного ресурса, к которому я бы обращался за помощью по любому вопросу. И сейчас, понимая, насколько это важно, мне бы хотелось объединить все свои знания воедино и помочь начинающим вэб-мастерам в освоении этого трудного, но прибыльного ремесла.</p> <p>Главной целью перед собой я ставлю объединение как можно большего количества информации на одном, моем, ресурсе. Чтобы вам не пришлось облазить весь интернет для поиска ответа на свой вопрос. И да, я понимаю, что у меня нет шансов стать монополистом в своей области, но попытка - не пытка.</p> </div> <?php include("$RF/patterns/aside.php"); include("$RF/patterns/footer.php"); ?> </div></center> </body> </html> Тут подключен header, вот он. <header id="header"> <section class="left"> <a href="/"><div class="home">Code In Road</div></a> </section> <section class="right"> <a href="/php">PHP</a> <div class="devider">•</div> <a href="/javascript">JavaScript</a> <div class="devider">•</div> <a href="/haskell">Haskell</a> <div class="devider">•</div> <a href="/ruby">Ruby</a> </section> </header> Нужно реализовать следующее. При прокрутке страницы > 100 нужно, чтобы header внизу обрамлялся рамкой (2px solid #e8e8e8). Делал это следующим образом. function test() { var html = document.documentElement; var body = document.body; var scrollTop = html.scrollTop || body && body.scrollTop || 0; scrollTop -= html.clientTop; // IE<8 alert(scrollTop); while (scrollTop > 100) { document.getElementById('header').style.borderBottom = "2px solid #e8e8e8"; } } При таком подходе все работает как надо, только если уже ПЕРЕД обновлением страницы она была проскроллена больше, чем на 100. Иначе скрипт просто выключается. |
Вызывайте функцию при скролле окна
|
Спасибо большое!
Вот черт, и всего то? Спасибо большое, добрый человек, апнул карму. Работает как надо, благодарю!
|
Viral, пример на странице конченый. Где-то была тут тема с годными примерами применения этого события. Не важно в общем.
|
kostyanet,
window.onscroll = function(){} давай, придумай, как "более лучше годно" повесить на это событие функцию там, обработчик, вот это все. |
Я писал про реализацию.
|
Часовой пояс GMT +3, время: 00:38. |