Форум

Houdy · #1 (**permalink**) 03.11.2013, 13:04

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

ruslan_mart · #2 (**permalink**) 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 · #3 (**permalink**) 03.11.2013, 19:03

Сообщение от Ruslan_xDD

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" менял на свой идентификатор! Может еще что-нибудь подскажешь?

рони · #4 (**permalink**) 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 · #5 (**permalink**) 03.11.2013, 22:32

Сообщение от рони

смотря какой браузер

<!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

рони · #6 (**permalink**) 03.11.2013, 23:22

Houdy,
пример в 4 посте у вас работает?

ruslan_mart · #7 (**permalink**) 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

рони · #8 (**permalink**) 04.11.2013, 05:15

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

Mukhtar · #9 (**permalink**) 04.11.2013, 07:38

jQuery можно

$('#some_id').hide();
$('#some_id').show();

Форум

Справочник

Discord чат

Курсы javascript