iT邦幫忙

0

請問像這種追蹤網頁滑到哪個區塊,右邊的導引列就會追蹤並顯示橘色線條在該區塊名稱,像這種的功能大家都怎麼實現的呢?

附圖
https://ithelp.ithome.com.tw/upload/images/20210504/201260575yXzrHppCx.jpg

我目前用react寫,本來想說用intersection observer做,但是只要像是基本資訊進入可視區,entry.isIntersecting就會變true,但我希望是上方的nav碰到基本資訊或銷售資訊區塊時才會使追蹤條變更,請問各位大大怎麼實現的呢?

先謝謝大家了!

.....改回答

2 個回答

0
Homura
iT邦高手 1 級 ‧ 2021-05-04 13:14:53

使用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

Homura iT邦高手 1 級 ‧ 2021-05-05 09:45:10 檢舉
0
japhenchen
iT邦大師 1 級 ‧ 2021-05-05 12:58:49

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 });
  });
});

https://jsfiddle.net/rbz8hkeg/38/

就那個會跟著滑鼠跑的紅色框框
如果你覺得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/

我要發表回答

立即登入回答