CSS3上的jQuery Active Class：动画滚动到div页面后

Question

https://jsfiddle.net/eyhwnsbz/5/

This is a generic scroll to div page where I am trying to get the active state when clicked to be active with the animated bar at the bottom. I used the pseudo ::after to do the animation.

I can achieve this if I did not use the ::after and just used the normal hover and active css the same but was wondering if what I am trying to get is possible.

$(document).ready(function () {
    $(window).scroll(function () {

        var y = $(this).scrollTop();

        $('nav ul li a').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 40) {
                $('nav ul li a').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });

    });
});

Thanks!

Answer 1

Try putting the content after header in side a div <div id="content"> and give margin-top value to the height of the header. Use $('header').height() for getting the height.

 $(document).ready(function () { $('#content').css('margin-top', $('header').height()) $(window).scroll(function () { var y = $(this).scrollTop(); $('nav ul li a').each(function (event) { if (y >= $($(this).attr('href')).offset().top - $('header').height()) { $('nav ul li a').not(this).removeClass('active'); $(this).addClass('active'); } }); }).scroll(); }); // SMOOTH SCROLLING (with negative scroll of 40 for header) $(function () { $('a[href*=#]:not([href=#])').click(function () { if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: (target.offset().top - $('header').height()) }, 850); return false; } } }); }); 

 * { margin:0; padding:0; } body { background:grey; } .container { max-width: 1000px; margin: 0 auto; background:white; } header { margin-bottom:80px; position:fixed; right:0; left:0; top:0; } nav { overflow:hidden; background:#1a1a1a; } nav ul { list-style-type:none; margin:0; padding:0; } nav ul li a { float:left; display:block; margin-right:20px; text-decoration:none; color:white; font-weight:bold; padding:20px } nav ul li a:hover, .active { border-bottom:2px solid pink; } #div1, #div2 { height:1000px; } #div1 { background:green; } #div2 { background:red; } #div3 { background:blue; height:400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="container"> <header> <nav> <ul> <li class="active"><a href="#div1">Div 1</a> </li> <li><a href="#div2">Div 2</a> </li> <li><a href="#div3">Div 3</a> </li> </ul> </nav> </header> <div id="content"> <section> <div id="div1"> <h1>This is Dev 1</h1> </div> </section> <section> <div id="div2"> <h1>This is Dev 1</h1> </div> </section> <section> <div id="div3"> <h1>This is Dev 1</h1> </div> </section> </div> </div>