Как сделать замену css свойств?
Друзья, подскажите как сделать замену css свойства в зависимости от прокрутки страницы на определенное кол-во пиксилей? Т.е. нужно что бы когда страница прокрутится вниз на 100px спрятать один элемент (display:none), а когда подняться обратно, что бы все востановилось!
|
window.onscroll = function() { var s = document.documentElement.scrollTop, e = document.getElementById('test').style; if(!this.scrollFlag && s > 100) { this.scrollFlag = true; e.display = 'none'; } else if(this.scrollFlag && s < 100) { this.scrollFlag = false; e.display = 'block'; } } |
Цитата:
|
Цитата:
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #test{ background-color: #FF0000; height: 50px; width: 50px; position: relative; top: 150px; } body{ height: 5000px; } </style> <script> window.onscroll = function() { var html = document.documentElement, body = document.body, s = html.scrollTop || body && body.scrollTop || 0; s -= html.clientTop, e = document.getElementById('test').style; if(!this.scrollFlag && s > 100) { this.scrollFlag = true; e.display = 'none'; } else if(this.scrollFlag && s < 100) { this.scrollFlag = false; e.display = 'block'; } } </script> </head> <body> <div id="test"></div> </body> </html> |
Цитата:
|
Houdy,
пример в 4 посте у вас работает? |
Цитата:
undefined < 100; //false; undefined > 100; //false; И тогда никакое условие не сработает ;) var s = document.body.scrollTop != undefined ? document.body.scrollTop : document.documentElement.scrollTop |
|
jQuery можно
$('#some_id').hide(); $('#some_id').show(); |
Часовой пояс GMT +3, время: 21:09. |