iT邦幫忙

0

透過 animation 到每一個 section,如何透過菜單變化顏色讓使用者知道自己在哪個 section?

假設有個菜單
active 是使用者正在這個 div 位子的顏色

<a class="section-btn active ease-in-out" href="#section-2">服務介紹</a>
<a class="section-btn ease-in-out" href="#section-3">成功案例</a>
<a class="section-btn ease-in-out" href="#section-4">聯絡我們</a>

菜單點擊後到該 section
另外移除所有 active 並為自己加上 active 這沒問題

$('.section-btn').on('click', function() {

    $('.section-btn').removeClass('active');
    $(this).addClass('active');

    $('body, html').animate({
        scrollTop: $($(this).attr('href')).offset().top - 70
    }, 1000);
});

每一個 section

<div id="section-2">
</div>

<div id="section-3">
</div>

<div id="section-4">
</div>

只是現在有個實現我想不到
就是當使用者是用捲軸往上回去時,此時會經過其他 section
怎麼樣讓對應的菜單能夠針對該菜單加上 active? 讓使用者知道自己現在在哪個 section?

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 9 級 ‧ 2019-10-20 15:18:08 檢舉
這個參考看看(檢視原始碼)
http://www.web3d.url.tw/ITHELP/JQUERY_20191020/
小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 18:47:04 檢舉
非常感謝 ccutmis 大大!
小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 18:50:37 檢舉
值得研究一番
小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 18:57:33 檢舉
假設最後一個 section 並沒有很多內容,無法碰到 top ,如何按照上面一樣會有同樣效果呢?
ccutmis iT邦高手 9 級 ‧ 2019-10-20 20:25:50 檢舉
這個應該不會有問題,
我的作法是頁面載入時把所有的class="sectionDiv"
在頁面的範圍(from & to)存到陣列,
判斷碰到的點不是在可視範圍上方,而是可視範圍H/2 的位置,
你可以想像是在網頁1/2高的地方畫一條水平線,
然後每次在頁面有滾動的時候就去偵測:
目前這條水平線有沒有跟陣列內容碰到(水平線>from && 水平線<to)...
只要最後一個section的最上方能超過畫面高度1/2就行,
你用我給的網址滾動到最底下那個section就知意思了
真的還是不行,那就在最底下的section後面塞個空的div墊高.... ^^"

1 個回答

1
咖冰拉
iT邦新手 4 級 ‧ 2019-10-20 11:18:26
最佳解答
看更多先前的回應...收起先前的回應...
小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 11:34:55 檢舉

喔喔對,這樣的概念@@
只是有更輕盈的方式嗎?

咖冰拉 iT邦新手 4 級 ‧ 2019-10-20 11:36:53 檢舉

codepen 有修改了 你再看看
輕盈是??

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 11:40:02 檢舉

position().top 這個是可以算該 div 到頂的距離對吧

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 11:41:37 檢舉

只是我是要讓 section-btn 加入 active 當經過該 div 時

咖冰拉 iT邦新手 4 級 ‧ 2019-10-20 11:42:39 檢舉

position().top是用來偵測
該DIV 最上方

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 11:47:01 檢舉

了解

咖冰拉 iT邦新手 4 級 ‧ 2019-10-20 11:55:48 檢舉
  if ( scroll >= $('#section-2').position().top &&
      scroll < $('#section-3').position().top)
  {
    $('.section-btn:nth-child(0)').addClass('active');
  }   
  else {
    $('.section-btn:nth-child(0)').removeClass('active');
  }
  

  if ( scroll >= $('#section-3').position().top &&
      scroll < $('#section-4').position().top)
  {
    $('.section-btn:nth-child(1)').addClass('active');
  } 
  else {
    $('.section-btn:nth-child(1)').removeClass('active');
  }
  
  if ( scroll >= $('#section-4').position().top)
  {
    $('.section-btn:nth-child(2)').addClass('active');
  }   
  else {
    $('.section-btn:nth-child(2)').removeClass('active');
  }

把裡面改成這樣?

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 12:05:19 檢舉

大概寫出來了,只是好像有點衝突
我最下面 section-4 內容不多,所以很難碰到上方 top,然後也沒有 section-5 ,所以按鈕那邊會壞掉

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 12:05:45 檢舉
    if (scroll >= $('#section-1').position().top && scroll < $('#section-2').position().top) {
        $('.section-btn:nth-child(1)').addClass('active');
    } else {
        $('.section-btn:nth-child(1)').removeClass('active');
    }

    if (scroll >= $('#section-2').position().top && scroll < $('#section-3').position().top) {
        $('.section-btn:nth-child(2)').addClass('active');
    } else {
        $('.section-btn:nth-child(2)').removeClass('active');
    }

    if (scroll >= $('#section-3').position().top && scroll < $('#section-4').position().top) {
        $('.section-btn:nth-child(3)').addClass('active');
    } else {
        $('.section-btn:nth-child(3)').removeClass('active');
    }
ccutmis iT邦高手 9 級 ‧ 2019-10-20 12:20:08 檢舉

優化的寫法參考:
把id名(或calss名)&對應的position().top用陣列記錄下來,
每次滾動就去foreach這個陣列,
判斷當前的scrollTop 是否有在陣列範圍內,
有則addClass,無則removeClass,
這樣可以只寫一個條件判斷搞定,
不然如果section-id很多(例如infiniteScroll產生的section)
不就要把if寫到天荒地老... /images/emoticon/emoticon04.gif

優化就交給樓主動動腦了...加油~

小松 Nana iT邦研究生 3 級 ‧ 2019-10-20 12:22:03 檢舉

好的感謝

咖冰拉 iT邦新手 4 級 ‧ 2019-10-20 12:37:45 檢舉

資料不多觸發不到的話可以用下面的語法來調整

if ( scroll >= $('#section-4').position().top - 300)
  {
    $('.section-btn:nth-child(3)').addClass('active');
  }   
  else {
    $('.section-btn:nth-child(3)').removeClass('active');
  }

-300 它的觸發點就會往上跑

我要發表回答

立即登入回答