如何使用javascript獲取頁面中當前的可查看元素？

我正在制作一個 nextjs 應用程式，我想根據視口中的可見部分更改導航欄活動按鈕，頁面子項看起來像這樣

<div id="section1" > </div>
<div id="section2" > </div>
...
<div id="faq" > </div>
<div id="contact" > </div>

例如，當用戶滾動并且螢屏中的當前 div 是聯系表單時，我將其設定為路由到/#contact 我的主要問題是如何檢測視口中的當前可視元素

我怎樣才能做到這一點？

uj5u.com熱心網友回復：

您可以使用

Javascript：

// simple function to use for callback in the intersection observer
const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        // verify the element is intersecting
        if(entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            // remove old active class
            document.querySelector('.active').classList.remove('active');
            // get id of the intersecting section
            var id = entry.target.getAttribute('id');
            // find matching link & add appropriate class
            var newLink = document.querySelector(`[href="#${id}"]`).classList.add('active');
        }
    });
}

// init the observer
const options = {
    threshold: 0.55
}

const observer = new IntersectionObserver(changeNav, options);

// target the elements to be observed
const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

HTML：

nav
    ul
        li
            a(href='#one').active One
        li
            a(href='#two') Two
        li
            a(href='#three') Three
        li
            a(href='#four') Four
        li
            a(href='#five') Five
            
section#one
    p Slide One

section#two
    p Slide Two

section#three
    p Slide Three
    
section#four
    p Slide Four
    
section#five
    p Slide Five

CSS：

nav
    position fixed
    
    width 100%
    top 0
    left 0
    right 0
    
    background-color white
    
    ul
        list-style-type none
        display flex
        align-items center
        justify-content space-around
        
        width 100%
        max-width 800px
        height 50px
        
        margin 0 auto
        padding 0
        
    li
        display inline-block

        padding 5px
        
    a
        display block

        height 40px
        
        padding 0 20px
        
        line-height 40px
        text-decoration none
        text-transform uppercase
        color #323232
        font-weight bold
        
        border-radius 4px
        
        transition background-color 0.3s ease-in
        
        &:hover
        &:active
        &:focus
            background-color rgba(#B8D6A8, 0.5)
        
        &.active
            background-color rgba(#B8D6A8, 0.5)
        
        
section
    display flex
    align-items center
    justify-content center
    
    min-height 100vh
    
p
    text-align center
    color white
    font-size 3.5em
    font-weight bold
    text-transform uppercase
    
#one
    background-color #6CA392
    
#two
    background-color #FFA58C
    
#three
    background-color #FF4F30
    
#four
    background-color #576B51
    
#five
    background-color #392A1B

標籤：javascript html 反应 下一个.js

上一篇：如何使陣列中的向量不改變其值？

下一篇：過濾URL的最后一個斜杠并回傳最后一個字符