Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <script>
    function _verScroll(){
      a=document.body.scrollTop;
      b=3000;
      x=((a*100)/b)*0.01;
      document.getElementById('escribe_aca').innerHTML = a;
      document.getElementById('top').style.opacity=x;
      
      if(a>300){
         document.getElementById('escribe_aca').style.background = 'red';
      }else {
      document.getElementById('escribe_aca').style.background = 'yellow';
​
      }
      }
    </script>
<style>
  #top{
    position:fixed;
    background: #555;
    top:0px;
    left:0px;
    width:100%;
    height:200px;
    opacity:0;
  }
  #escribe_aca{position:fixed; top:0; background:yellow;padding:5px;}
  </style>
</head>
  <body onscroll="_verScroll()">
    <div id="top">
    </div>
  <div style="height:3000px" "weight:2000px">
    <p>...</p>
    <p>Div con mucha altura solo para demostración</p>
    <p>Mueve el scroll --&gt;</p>
  </div>
  <p id="escribe_aca">0</p>
</body>
</html>
 
sdfgsdgfsdfgsdgfsdfg
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers