2. 程式人生 > >javaScript實現滾動條事件

javaScript實現滾動條事件

阿新 • • 發佈：2019-01-07
//滾動事件 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"; } //控制左側 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"; } }

相關推薦

javaScript實現滾動條事件

//滾動事件 function myScroll() { var i = document.body.scrollTop; var top = document.getElementById("

JavaScript 滾動條事件

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/test.js" type=

26、Selenium + Python 實現 UI 自動化測試-呼叫 JavaScript 操作滾動條

前面我們學了 JavaScript 基礎、JS DOM等知識，也在Selenium中呼叫過一次 JavaScript 指令碼 實現滑動頁面滾動條。那在 Selenium 自動化的過程中，都有哪些呼叫 

QML之實現滾動條

Scrolbar.qml import QtQuick 2.7 import QtQuick.Controls 2.0 // 滾動條 Rectangle { id: scrollbar; opacity: 0 // 繫結到ListView元件 property

滾動條事件window.onscroll

        例：統戰滾動條位置隨高度變化 // 答題卡位置隨滾動條變化 window.onscroll = function(){ var a = document.documentElement.scrollTop

offsetTop 實現滾動條內內容定位

js程式碼： var _parent_top = document.getElementsByClassName('task-exe-phase-container')[0].offsetTop;var _phase_top = document.getElementsByClassName('phase_

js和jquery監聽滾動條事件

網上查了一下，找到兩種js監聽滾輪事件的方法 （1）window.onscroll = function() {}  （2）document.addEventListener("onscroll",

vue中實現滾動條緩慢向上移動的效果

.vue //用於判斷按鈕何時顯示 <div class="btn-top" v-if="scrollHeight > alarmHeight"> <el-button type="info" icon="el-icon-arrow

四十、滑鼠滾軸、滾動條事件

一、滑鼠滾軸事件 存在瀏覽器相容問題 說明：當用戶通過滑鼠滾輪與頁面互動、在垂直方向上滾動頁面時(上/下)，就會觸發滾軸事件，且這個事件可以在任何元素上觸發，最終會冒泡到document(IE)或window(Opera、Chrome和Safari)物件。 1.在IE、Opera、Ch

javascript實現滾動視窗

一.實現的效果圖   二.涉及到的知識點     window.open();方法用於開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。     moveTo():方法可把視窗的左上角移動到一個指定的座標。     window.screen.height:螢幕畫素的高

javascript 讀取滾動條位置，文件總高度，頁面高度，滾動條距離底端位置

javascript 讀取滾動條位置，文件總高度，頁面高度，滾動條距離底端位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g

滾動條事件,當頁面滾動到距頂部一定高度時某DIV自動隱藏和顯示

 當頁面滾動到距頂部一定高度時某DIV自動隱藏和顯示  $(function () {                         //繫結滾動條事件               //繫結滾動條事件             $(window).bind("scroll"

jquery 滾動條事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

jquery處理滾動條事件

   當頁面的滾動條上下移動時，飄浮廣告隨著滾動條的滾動而上移或者下移，要明白兩點，第一：放廣告的層最好採用絕對定位，它的位置應該隨著滾動條的改變而上下移動，滾動條的滾動促發的是onscroll事件，廣告條所在的層的top值就是滾動條的高度，具體程式碼如下： <htm

js操作滾動條事件例項

本文例項講述了js操作滾動條事件的方法。分享給大家供大家參考。具體分析如下： 之前一直很納悶，如何監視滾動條的事件，今天終於有點明白了。 下邊程式碼，是監聽滾動條只要移動，下方的返回頂部的div顯示與隱藏的程式碼 ? 1 2 3 4 5 6 7

HTML5 移動端 實現滾動條

實現滾動條 相關程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

CSS3 calc實現滾動條出現頁面不跳動

當頁面內容動態載入，開始沒有滾動條，內容增多後出現滾動條，這時使用固定寬度居中對齊佈局會向左偏移一個滾動條寬度。解決方法可以給內容全部新增overflow-y:scroll;或者是根據內容用css填充好再補充內容。本文介紹的是calc來計算滾動條寬度，當有滾

input用JavaScript實現回車響應事件，相容各瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

JavaScript實現網頁底部事件觸發

最近在寫小組官網，想實現一種效果就是根據使用者當前瀏覽情況，載入後續的文章內容，於是就在網上找相關的內容，但是發現好多都是無法實現的，終於在我的苦苦尋找之下，終於找到了解決方案，程式碼如下: function ScrollEvent() {

jQuery實現滾動條動態載入

//滾動條載入底部自動載入 $(function(){ //滑鼠滾動事件 $(window).scroll(function(){ console.log("滾動條到頂部的垂直高度：" + $(window).scrollTop() ); conso