資料載入中

我是 chung

鎖住記憶

  • Chung
  • 0°C
  • 11 年又 216 天

判斷捲軸的位置

當捲軸往下移動時,判段目前移動到哪個位置...
Javascript部份

$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
$("span.qScrollTop").text(scrollVal);
})
});

html部份

<span class="qScrollTop" style="position:fixed;"></span>

可以利用在哪裡?...那可多了...

例如:讓捲軸捲動到某個位置時,原本隱藏的物件讓他顯示出來、反之讓他隱藏起來。

台北市松山區八德路四段650號 Go

  • 捲軸移動位置的判斷
  • Javascript控制捲軸顯示物件
  • 隱藏物件的顯示與隱藏
  • HTML與Javascript的結合應用
  • 網頁捲軸效果的實現方法
https://innstory.com/story-判斷捲軸的位置-383

上一篇
 台北東區宇澤小舖

下一篇
想看玩命關頭7 

發表留言

  • 哲煜

    捲軸移動時顯示或隱藏物件的功能確實能提升使用者體驗。這樣的互動設計讓網頁看起來更有層次感,使用者能更清楚地找到想要的資訊。
    2026-08-06 下午 2 點回覆
  • 林蜜雪

    Chung 請問我照貼了 也有引入Jquery 怎麼還是不能跑
    10 年又 0 天回覆
    • Chung

      測試過沒問題哦~ 因為是為了監看捲軸的位置...所以記得把畫面的高設高一些。
      10 年又 0 天回覆

作者簡介

我是chung,網路工作者

主業是網站系統開發建置
副業是做夢、紀錄故事
作品請參考:teme.biz
做夢請參考:innstory.com
聯絡:chung.teme@gmail.com

有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。


推薦閱讀

作者其他相關類別故事

CSS Radio Button

CSS Radio Butt…

Chung 11 年又 334 天 2.9K

寫系統的時候三不五時總會用到Radio Button 和 Checkboxes 目前就在寫這個部份@...

國語演說

國語演說

Chung 2025-11-17 下午 6 點 169

5U緊湊的11月,再次迎來人生第一次國語演說。 升上四年級,能參加的校內語文競賽變多了,但就是少了...

2026再次來到奧林P客錄影現場

2026再次來到奧林P客錄影…

Chung 2026-07-01 下午 9 點 561

2026年的今天,再次來到《奧林P客》的錄影現場。 這回,5G也一起參加了。 是說,她本人原本可是千...


推薦閱讀

這個地址也發生了其他故事

圖文穿插效果

圖文穿插效果

Chung 11 年又 211 天 2K

寫故事還是得圖文穿插看起來方便些~ 其實一直都在找最適合寫故事的方式,一開始我把所有上傳照片都放在故...

Photoshop 曲線文字建置

Photoshop 曲線文字…

Chung 11 年又 186 天 2.8K

Photoshop一直都是很強悍的繪圖軟體。 裡頭的【鋼筆工具】,可以拉貝茲曲線的.... 我剛開始...

馬來西亞-薩騎馬

馬來西亞-薩騎馬

Chung 11 年又 180 天 3K

想事情的時候,喜歡在嘴裡咬東西...餅乾、糖果。 但最近家裡缺糧...沒有補貨。剛好想到前些日子布萊...


附近景點

這個地址-台北市松山區八德路四段650號-附近還有甚麼?

  • 舊總督府第二師範學校大禮堂(國立臺北教育大學舊禮堂)
  • 專賣局(今臺灣菸酒股份有限公司)
  • 芝山岩遺址
  • 監察院
  • 國立臺灣大學日式宿舍-青田街7巷2號
  • 前日軍衛戍醫院北投分院