javascript - onscroll 添加事件类不起作用

Question

hi on scroll active class 未添加到li on click on a 工作正常请看一次。

<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 p a {
    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 p a: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>

hi on scroll active class is not add to the li on click on a that works fine please look it once.

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

});

删除类 active 发射延迟的操作，因此我将其移至顶部。要选择链接，请使用他的数据属性。