Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать замену css свойств? (https://javascript.ru/forum/misc/42623-kak-sdelat-zamenu-css-svojjstv.html)

Houdy 03.11.2013 13:04
Как сделать замену css свойств?
 
Друзья, подскажите как сделать замену css свойства в зависимости от прокрутки страницы на определенное кол-во пиксилей? Т.е. нужно что бы когда страница прокрутится вниз на 100px спрятать один элемент (display:none), а когда подняться обратно, что бы все востановилось!

ruslan_mart 03.11.2013 13:15 
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';
   }
}

Houdy 03.11.2013 19:03
Цитата:
Сообщение от Ruslan_xDD (Сообщение 279306) 
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';
   }
}
Ничего не происходит!!! "test" менял на свой идентификатор! Может еще что-нибудь подскажешь?

рони 03.11.2013 19:56
Цитата:
Сообщение от Houdy
Ничего не происходит!!!
Цитата:
Сообщение от Ruslan_xDD
document.documentElement.scrollTop
смотря какой браузер 

<!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 03.11.2013 22:32
Цитата:
Сообщение от рони (Сообщение 279370)
смотря какой браузер 

<!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 s = document.documentElement.scrollTop||document.body.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';
   }
}
  </script>
</head>

<body>
  <div id="test"></div>
</body>

</html>
все равно ни чего не получается! Браузер chrome и mozila

рони 03.11.2013 23:22
Houdy,
пример в 4 посте у вас работает?

ruslan_mart 04.11.2013 04:59
Цитата:
Сообщение от РОНИ
document.documentElement.scrollTop||document.body. scrollTop
А если document.documentElement.scrollTop - это 0? Будет же ведь тогда присвоено значение document.body.scrollTop, а оно - undefined:
undefined < 100; //false;
undefined > 100; //false;


И тогда никакое условие не сработает ;)

var s = document.body.scrollTop != undefined ? document.body.scrollTop : document.documentElement.scrollTop

рони 04.11.2013 05:15
Houdy,
Ruslan_xDD,
4 пост исправлен дока по теме тут Размеры и прокрутка для страницы

Mukhtar 04.11.2013 07:38
jQuery можно
$('#some_id').hide();
$('#some_id').show();


Часовой пояс GMT +3, время: 08:10.