JavaScript implementation of scroll bar events

The example of this article shared JS to implement the specific code of the scroll bar event, for everyone, the specific content is as follows

javaScript实现滚动条事件详解

Code:

       body {margin: 0; Padding: 0;} .cont {height: 7000px;} # { Position: fixed; width: 100%; Top: 0px; Left: 0px; Background-Color: Rosybrown; Display: None;} #left {position: fixed; width: 50px; height: 400px; top: 150px Left: 50px; Background-Color: CadetBlue; Display: none;} #} #} #} #} #left ul {border: 1px solid white; / * color: azure; * / height: 30px; line-height: 30px; text-align: center; margin: 15px auto; / * display: none; * /} .a {background-color: burlywood; color: #ffff;}  " // scroll events function myScroll () {var i = document.body.scrollTop; var top = document.getElementById ( "top"); var left = document.getElementById ( "left"); var f1 = document.getElementById ("f1"); var f2 = document.getlementBYID ("f2"); var f3 = document.getlementBYID ("f3"); var f4 = document.getlementBYID ("f4"); var f5 = document.getlementByid (" F5 "); var f6 = document.getlementBYID (" f6 "); // Control top IF (i> = 1000) {Top.Style.Display =" block "; Top.innerHTML = i;} else {Top.Style .display = "none";} // Control the left IF (i> = 2000) {Left.Style.display = "block";} else {left.style.display = "none";} // Show floor IF (i> = 2000 && i  2500 && i  3000 && i  3500 && i  4000 && i    <= 5000) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "a";
  }

  }
   
    3F
  • 5F
  • 6F
The above is all the contents of this article, I hope to help everyone, I hope everyone Support TUMI clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment