使用position:sticky然後固定位置top就行
參考https://developer.mozilla.org/en-US/docs/Web/CSS/position
或是找現成sidebar也行
感謝H大，我發現我表達的可能不夠清楚，這樣說好了，如果您想要做像是旁邊有一個區塊追蹤我們畫面滾動到譬如說:區塊1 或區塊2的時候，旁邊的進度條會跟著變動，您認為怎麼做會比較好?大概如何去感知畫面滾動到哪個區塊，旁邊進度條跟著變動。
Btw, position:sticky 歪打正著解決我過往其中一個疑問，感恩!
我剛有看一下您的個人部落格有用這種效果，文章目錄那個區塊，內容會根據使用者滑動到哪個區塊做提醒，這個部分。
我找了一下，有個叫做scrollspy，https://www.youtube.com/watch?v=Fe0GZVPWrqw
steven841221
喔喔
你說的那個是html的錨點
基本用法參考這篇
https://blog.csdn.net/shan1774965666/article/details/47723007?locationNum=11&utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
React的追蹤方式可以參考這篇
https://stackoverflow.com/questions/48966691/how-to-implement-a-scrollspy-with-react
jQuery
CSS
.myDiv{
position:absolute;
left:100px;
top:10px;
height:100px;
width:100px;
background-color:red;
border:1px solid red
}
HTML
<div class="myDiv">
</div>
javascript
$(function(){
$(window).mousemove(function (e) {;
$(".myDiv").css({ left: e.pageX,top:e.pageY });
});
});
就那個會跟著滑鼠跑的紅色框框
如果你覺得CSS跑起來不花悄，你也可以用animate來做，會有跟隨滑鼠的可愛感
如果你的問題是要跟著捲軸的話
把
$(function(){
$(window).mousemove(function (e) {;
$(".myDiv").css({ left: e.pageX,top:e.pageY });
});
});
改成
$(function(){
$(window).scroll(function () {;
let scrollTopX = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
$(".myDiv").animate({ top:scrollTopX+10 },100);
});
});
就能跟著捲軸向上向下緩步跟著跑了(延遲100ms跑)，HTML裡加幾十個＜BR＞就可以讓捲軸跑出來
https://jsfiddle.net/nj9b6dyx/4/
iThome鐵人賽
看影片追技術