onscroll添加活動類不起作用

Question

您好滾動活動類沒有添加到點擊就可以了，請仔細查看一次。

 <script> $('nav a').on('click', function() { var scrollAnchor = $(this).attr('data-scroll'), scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 150; $('body,html').animate({ scrollTop: scrollPoint }, 500); return false; }) $(window).scroll(function() { var windscroll = $(window).scrollTop(); if (windscroll >= 100) { $('.wpb_wrapper section').each(function(i) { if ($(this).position().top <= windscroll - 20) { $('nav a.active').removeClass('active'); $('nav a').eq(i).addClass('active'); } }); } else { $('nav').removeClass('fixed'); $('nav a.active').removeClass('active'); $('nav a:first').addClass('active'); } }).scroll(); </script> 

 .cs-hd { font-weight: bold; font-size: 24px; } .cs-para { font-size: 19px; } /*first section */ .cs-secondpara { padding-top: 15px; } .cs-lf { background: #eaeaea; padding: 30px; border-radius: 15px; } .cs-lf p { font-size: 15px; font-weight: bold; line-height: 30px; } .cs-pa { border-bottom: 1px solid #a2a2a2; padding-bottom: 30px; } .cs-ul { line-height: 30px; font-size: 15px; padding-top: 30px; } .cs-bhd { color: #29aae2; font-weight: bold; font-size: 21px; } /*second-section*/ .cs-im-bl { display: inline-block; border-right: 1px solid #9c9191; padding-right: 20px; width: 20%; vertical-align: top; } .cs-bul { display: inline-block; font-size: 17px; line-height: 27px; width: 78%; } .cs-main { background: white; padding: 30px; border-radius: 15px; } .cs-main p { line-height:27px; } .p-four { padding-top: 10px; } .cs-blu-hd { color: #29aae2; font-size: 22px; } /*third section*/ .cs-im { display: inline-block; vertical-align: top; padding-right: 15px; padding-top: 55px; } .cs-bul-third ul { border-left: 1px solid #9c9191; } .cs-bul-third { display: inline-block; font-size: 17px; line-height: 27px; width: 67%; } /*tab section fourth */ .vc_tta-title-text { font-size: 17px; color: #231f20; font-weight: bold; } .vc_tta-tab { margin: 1px 0 0 0px !Important; border: 1px solid #908789; } .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a .vc_tta-title-text { color: white; } .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a { background-color: #29aae2 !Important; } .vc_tta.vc_general .vc_tta-tab>a { padding: 14px 44px !important; } .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:focus, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:hover { background-color: transparent; } .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a { background: transparent !Important; } .cs-list { font-size:17px; line-height:30px; } .cs-border { border: 1px solid #c7c7c7; border-radius: 15px; } .cs-border p { line-height: 27px; } .line-banner-section pa { padding: 5px 5px 5px 5px !important; width: 200px !important; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; color: #41ABE1 !important; background: #ffffff; } .line-banner-section pa:hover { width: 200px !important; background: rgba(255, 255, 255, 0); color: #ffffff !important; } .cs-txt-blk { margin-bottom: 0px; } /*nav bar*/ .menu { width: 160px; height: auto; background-color: #eaeaea; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-center { width: auto; height: auto; margin: 0 auto; padding: 0; } #menu-center ul { margin: 0 !IMPORTANT; padding: 10px 10px 10px 24px; } #menu-center ul li { list-style: none; margin: 0px 0px 20px 0; width: 98px; } #menu-center .active { font-size: 14px; color: #fff; text-decoration: none; line-height: 16px; font-weight: bold; } #menu-center a { color: black; text-decoration: none; line-height: 16px; font-size: 14px; font-weight: bold; } #cs-index { z-index: 1; position: fixed; left: -14px; top: 130px; width: 180px; } 

 /*navigation bar links*/<body> <div class="m1 menu"> <div id="menu-center"> <nav> <ul> <li><a href="#" data-scroll="top">Innovating in<br>Entrepreneurship<br>services</a> </li> <li><a href="#" data-scroll="news">Training Future<br>and Present<br>Entrepreneurs</a> </li> <li><a href="#" data-scroll="products">Mentoring<br>and<br>Accelerating</a> </li> <li> <a href="#" data-scroll="contact">Working<br>Internationally</a> </li> <li><a href="#" data-scroll="bottom">Innovation and<br>Intrapreneurship<br>in Corporates</a> </li> <li><a href="#" data-scroll="last">Impact Real<br>Scale-ups</a> </li> </ul> </nav> </div> </div> /*one section where scrolling comes its a wordpress site*/ <div class="wpb_wrapper"><div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"> <section id="bottom" data-anchor="bottom"> <h4 class="cs-hd" style="text-align: center;">Innovation and Intrapreneurship in Corporates</h4> </section></div> </div> <div class="wpb_single_image wpb_content_element vc_align_center"> <figure class="wpb_wrapper vc_figure"> <div class="vc_single_image-wrapper vc_box_border_grey"><img width="1035" height="490" src="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png" class="vc_single_image-img attachment-full" alt="corporate-infographic" srcset="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png 1035w, http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic-768x363.png 768w" sizes="(max-width: 1035px) 100vw, 1035px"></div> </figure> </div> <div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div> </div> </body> 

您好滾動活動類沒有添加到點擊就可以了，請仔細查看一次。

Answer 1

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    $('nav a').removeClass('active');
    if (windscroll >= 100) {
            $('.wpb_wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 20) {
                var sectionName = $(this).data('anchor');
                $('nav a[data-scroll=' + sectionName + ']').addClass('active');
            }
        });

    } else {
        $('nav').removeClass('fixed');        
        $('nav a:first').addClass('active');
    }

});

采取行動來消除班級活躍的射擊障礙，所以我將其移至最上層。 要選擇鏈接，請使用他的數據屬性。