Javascript 如何使用固定导航抵消命名锚滚动

这最终只适用于移动设备，因此桌面上的小提琴有点不稳定。假设你看不到溢出，导航通过触摸沿x轴滚动。 我似乎不知道如何偏移导航滚动，这样命名的div就不会隐藏在粘性标题和导航后面。例如，如果单击“三”，我希望div#Three的顶部与导航的底部对齐，而不是与窗口的顶部对齐

另外，不相关的，我希望导航在您滚动类别div时向左/向右滚动。因此，当您滚动“四”时，活动的四链接将移动到窗口中。如果有人对此有建议，我们也将不胜感激

<div id="mobile-wrap">
<div id="sticky-header">
    Sticky header
</div>

<div class="content-area">
    <p>Content area</p>
</div>

<div class="category-nav">
    <ul>
        <li><a class="active" href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#five">Five</a></li>
    </ul>
</div>

<div id="one" class="category">
    <h1>One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quam, enim ad obcaecati odio odit nam totam soluta temporibus tempora, quidem corrupti laboriosam eaque dignissimos dolor, architecto quia dolorem! Dolores numquam, autem beatae!</p>
</div>
<div id="two" class="category">
    <h1>Two</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quam, enim ad obcaecati odio odit nam totam soluta temporibus tempora, quidem corrupti laboriosam eaque dignissimos dolor, architecto quia dolorem! Dolores numquam, autem beatae!</p>
</div>
<div id="three" class="category">
    <h1>Three</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quam, enim ad obcaecati odio odit nam totam soluta temporibus tempora, quidem corrupti laboriosam eaque dignissimos dolor, architecto quia dolorem! Dolores numquam, autem beatae!</p>
</div>
<div id="four" class="category">
    <h1>Four</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quam, enim ad obcaecati odio odit nam totam soluta temporibus tempora, quidem corrupti laboriosam eaque dignissimos dolor, architecto quia dolorem! Dolores numquam, autem beatae!</p>
</div>
<div id="five" class="category">
    <h1>Five</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quam, enim ad obcaecati odio odit nam totam soluta temporibus tempora, quidem corrupti laboriosam eaque dignissimos dolor, architecto quia dolorem! Dolores numquam, autem beatae!</p>
</div>

<div class="content-area">
    <p>Content area</p>
</div>

jquery：

$(document).ready(function () {

        let headerHeight = $('#sticky-header').outerHeight();
        let catNavHeight = $('.category-nav').outerHeight();
        let offsetHeight = headerHeight + catNavHeight + 8;
        let categoryNavDistanceFromTop = $('.category-nav').offset().top;

        $(window).scroll(function () {
            if ($(window).scrollTop() >= (categoryNavDistanceFromTop - headerHeight)) {
                $('.category-nav').addClass("affix");
            } else {
                $('.category-nav').removeClass("affix");
            }
        });


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

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

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

$（文档）.ready（函数（）{
让headerHeight=$（“#sticky header”）.outerHeight（）；
设catNavHeight=$（'.category nav'）.outerHeight（）；
让车远视=车头高度+导航高度+8；
让categoryNavDistanceFromTop=$（'.category nav'）.offset（）.top；
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）>=（CategoryAvDistanceFromTop-headerHeight））{
$（'category nav'）.addClass（“词缀”）；
}否则{
$（'category nav'）。移除类别（“粘贴”）；
}
});
$（文档）.on（“滚动”，onScroll）；
//平滑卷轴
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
让target=this.hash，
菜单=目标；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
让scrollPos=$（document.scrollTop（）；
$（'.category nav a'）。每个（函数（）{
让currLink=$（这个）；
让refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'.category nav a'）。removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}

$(document).ready(function () {

        let headerHeight = $('#sticky-header').outerHeight();
        let catNavHeight = $('.category-nav').outerHeight();
        let offsetHeight = headerHeight + catNavHeight + 8;
        let categoryNavDistanceFromTop = $('.category-nav').offset().top;

        $(window).scroll(function () {
            if ($(window).scrollTop() >= (categoryNavDistanceFromTop - headerHeight)) {
                $('.category-nav').addClass("affix");
            } else {
                $('.category-nav').removeClass("affix");
            }
        });


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

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

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