css3 :after animation scroll to div page 上的 Jquery 事件类

Question

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

这是一个通用的滚动到 div 页面的页面，我试图在单击底部的动画条以使其处于事件状态时获得事件状态。我使用伪::after 来制作动画。

如果我不使用::after 并且只使用相同的普通悬停和事件 css，我可以实现这一点，但想知道我想要获得的东西是否可行。

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

    });
});

谢谢!

Answer 1

尝试将内容放在header 之后在 div 旁边 <div id="content">并为页眉的高度赋予 margin-top 值。使用 $('header').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>