更改窗口滚动的 url

Question

我想在滚动窗口时更改 url，而不是更改菜单类

我从这里得到了参考

https://codepen.io/anon/pen/LdLgNo

我稍微修改了一下，只是添加了一些推送状态，但问题是我有一个固定的标题，所以我想在它达到这个高度时更改它，在这种情况下为 75px，我还为滚动添加了额外的 75px ，但是还是不能正常工作，实际上如何在div滚动并且每个div的顶部遇到标题的底部时使其精确，因此url和活动类正在发生变化

HTML：

   <div class="m1 menu">
        <div id="menu-center">
            <ul>
                <li><a class="active" href="#home">Home</a>

                </li>
                <li><a href="#portfolio">Portfolio</a>

                </li>
                <li><a href="#about">About</a>

                </li>
                <li><a href="#contact">Contact</a>

                </li>
            </ul>
        </div>
    </div>
    <div id="home"></div>
    <div id="portfolio"></div>
    <div id="about"></div>
    <div id="contact"></div>

CSS：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 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;
}
.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: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

JS：

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-75
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });


function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

代码笔：https://codepen.io/anon/pen/LdLgNo

Answer 1

这里你只处理了一方面

$('html, body').stop().animate({
            'scrollTop': $target.offset().top-75
        }, 500, 'swing', function () {

对于在单击导航锚点时将页面滚动到正确位置的此功能，您已将 75px 偏移量考虑在内。

但是你还没有完成它的另一部分 - 滚动处理程序，它检查页面滚动到的位置。最简单的方法是，如果您将其计算为您读取的偏移量，那么您可以在它之后保持其余条件不变：

 var scrollPos = $(document).scrollTop() + 75;

https://codepen.io/anon/pen/VXWVWW