首頁>Program>source

我的問题是下一个: 只有我代碼的最後一部分添加了该類,其餘部分則没有。 (在 5 ) 我的html的每个部分都有一个唯一的類,並且相同的類也位於列表標記中

最新回復
  • 7月前
    1 #

    我之前曾提出過這个想法,我將放置HTML,CSS和JS代碼,您可以阅讀並使用 JS代碼,也许会對您有所帮助。

    您可以在Codepen上查看代碼或使用代碼段。

    如果您有任何問题,請問我。

    關註JavaScript中的以下代碼:

    window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight
    

    摘要:

    var sections = document.getElementsByTagName("section"),
        li       = document.getElementsByClassName("li"),
        i;
    window.onscroll = function () {
        
        for ( i = 0 ; i < sections.length ; i = i + 1 ) {
            
            if ( window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight ) {
                
                li[i].classList.add("red");
                sections[i].classList.add("red");
                
            } else {
                li[i].classList.remove("red");
                sections[i].classList.remove("red");
            }
            
        }
        
    }
    
    body
    {
        margin:0;
        padding:0;
        font-family:sans-serif;
        height:2800px;
        background:#ccc;
    }
    .fixed
    {
        position:fixed;
        width:300px;
        height:200px;
        background:#ccc;
        right:20px;
        top:50px;
        padding:20px;
        box-sizing:border-box;
    }
    .fixed ul 
    {
        margin:0;
        padding:0;
    }
    .fixed ul li
    {
        line-height:40px;
        list-style-type:none;
        font-size:25px;
        font-weight:bold;
    }
    section
    {
        width:100%;
        height:600px;
        background:yellowgreen;
        box-sizing:border-box;
        border:4px solid;
        margin-top:25px;
        line-height:600px;
        font-size:40px;
        text-align:center;
        font-weight:bold;
    }
    .red
    {
        color:red;
    }
    
    <div class="fixed">
        <ul>
            <li class="li">one</li>
            <li class="li">two</li>
            <li class="li">three</li>
            <li class="li">four</li>
        </ul>
    </div>
    <section>one</section>
    <section>two</section>
    <section>three</section>
    <section>four</section>
    

  • arrays:我在將MATLAB代碼轉換為Python時遇到問题
  • android:更改ProgressDialog的背景