快捷導(dǎo)航

javaScript實(shí)現(xiàn)滾動(dòng)條事件詳解

更新時(shí)間：2020年03月24日 08:44:41 作者：Z_唐

這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)滾動(dòng)條事件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)滾動(dòng)條事件的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<html>

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <style>
  body {
  margin: 0;
  padding: 0;
  }

  .cont {
  height: 7000px;
  }

  #top {
  position: fixed;
  width: 100%;
  height: 55px;
  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 {
  list-style: none;
  padding-left: 0px;
  }

  #left ul li {
  border: 1px solid white;
  /*color: azure;*/
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 15px auto;
  /*display: none;*/
  }

  .a {
  background-color: burlywood;
  color: #FFFFFF;
  }
 </style>

 <script>
  //滾動(dòng)事件
  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.getElementById("f2");
  var f3 = document.getElementById("f3");
  var f4 = document.getElementById("f4");
  var f5 = document.getElementById("f5");
  var f6 = document.getElementById("f6");

  //控制頂部
  if(i >= 1000) {
   top.style.display = "block";
   top.innerHTML = i;
  } else {
   top.style.display = "none";
  }

  //控制左側(cè)
  if(i >= 2000) {
   left.style.display = "block";
  } else {
   left.style.display = "none";
  }

  //顯示樓層

  if(i >= 2000 && i <= 2500) {
   f1.className = "a";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 2500 && i <= 3000) {
   f1.className = "";
   f2.className = "a";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 3000 && i <= 3500) {
   f1.className = "";
   f2.className = "";
   f3.className = "a";
   f4.className = "";
   f5.className = "";
   f6.className = "";
  } else if(i > 3500 && i <= 4000) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "a";
   f5.className = "";
   f6.className = "";
  } else if(i > 4000 && i <= 4500) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "a";
   f6.className = "";
  } else if(i > 4500 && i <= 5000) {
   f1.className = "";
   f2.className = "";
   f3.className = "";
   f4.className = "";
   f5.className = "";
   f6.className = "a";
  }

  }
 </script>

 </head>

 <body onscroll="myScroll()">
 <div id="left">
  <ul>
  <li id="f1">1F</li>
  <li id="f2">2F</li>
  <li id="f3">3F</li>
  <li id="f4">4F</li>
  <li id="f5">5F</li>
  <li id="f6">6F</li>

  </ul>

 </div>
 <div id="top"></div>
 <div class="cont"></div>

 </body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uploadify在Firefox下丟失session問(wèn)題的解決方法
在用uploadify上傳插件時(shí)遇到了一個(gè)問(wèn)題，在讀session時(shí)認(rèn)為沒(méi)有權(quán)限而被攔截了，后來(lái)在后臺(tái)打印登錄時(shí)產(chǎn)生session的id和上傳時(shí)讀取session的id，解決方法如下，感興趣的朋友可以了解下
2013-08-08
JavaScript相等運(yùn)算符的九條規(guī)則示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript相等運(yùn)算符的九條規(guī)則，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Javascript如何判斷數(shù)據(jù)類(lèi)型和數(shù)組類(lèi)型
這篇文章主要介紹Javascript如何判斷數(shù)據(jù)類(lèi)型和數(shù)組類(lèi)型,通俗易懂,需要的朋友可以參考下。
2016-06-06
利用百度地圖API獲取當(dāng)前位置信息的實(shí)例
下面小編就為大家?guī)?lái)一篇利用百度地圖API獲取當(dāng)前位置信息的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助
2017-11-11
javascript判斷css3動(dòng)畫(huà)結(jié)束 css3動(dòng)畫(huà)結(jié)束的回調(diào)函數(shù)
本文主要給大家介紹的是如何使用javascript判斷CSS3動(dòng)畫(huà)效果結(jié)束，主要是使用了javascript的回調(diào)函數(shù)，其思路是一旦動(dòng)畫(huà)或變換結(jié)束，回調(diào)函數(shù)就會(huì)觸發(fā)。不再需要大型類(lèi)庫(kù)支持，非常的簡(jiǎn)單實(shí)用，推薦給大家。
2015-03-03
js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載提升網(wǎng)頁(yè)打開(kāi)速度
這篇文章主要為大家介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)圖片延時(shí)加載,提升網(wǎng)頁(yè)打開(kāi)速度，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛,具體的樣子就是讓它會(huì)跟隨著我們的鼠標(biāo)進(jìn)行移動(dòng),那么我們?nèi)绾螌?shí)現(xiàn)這樣的效果呢,下面來(lái)詳細(xì)講解實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-10-10
IE中createElement需要注意的一個(gè)問(wèn)題
最近有讀者求助，說(shuō)在iframe中，創(chuàng)建一個(gè)元素，然后添加到父頁(yè)面中在ie6，ie7中行不通，而firefox和IE8可以。
2010-07-07
微信小程序傳值以及獲取值方法的詳解
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)
本文主要介紹了利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)。方法有別于原始的做法，大家可以試著找原始做法與本文所說(shuō)方法之間的區(qū)別。有興趣的朋友可以看下，希望對(duì)大家有所幫助
2016-12-12