Добрый день всем, столкнулся с такой проблемой.
Есть страничка, на страничке есть тег <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. Иначе скрипт просто выключается.