如何用固定的导航偏移命名锚滚动

问题描述

jsfiddle

这最终将仅适用于移动设备，因此在台式机上，小提琴有点儿摇摇欲坠。只是假装看不到溢出，并且导航通过触摸沿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,autem beatae!</p>
</div>
<div id="three" class="category">
    <h1>Three</h1>
    <p>Lorem ipsum dolor sit amet,autem beatae!</p>
</div>
<div id="four" class="category">
    <h1>Four</h1>
    <p>Lorem ipsum dolor sit amet,autem beatae!</p>
</div>
<div id="five" class="category">
    <h1>Five</h1>
    <p>Lorem ipsum dolor sit amet,autem beatae!</p>
</div>

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

#mobile-wrap {max-width: 400px; margin: auto; border: 1px solid black; font-family: sans-serif; position: relative; overflow: hidden;}
#sticky-header {height: 60px; padding: 0 24px; position: fixed; top: 0; z-index: 2; background-color: #333; color: white; width: 399px;}
.content-area {background-color: #e6e6e6; padding: 100px 24px; min-height: 200px;}
.content-area:last-of-type {height: 1000px;}

.category-nav {background-color: blue; position: relative; padding: 24px 0; overflow-x: scroll; white-space: nowrap; width: 100vw;}
.category-nav.affix {position:fixed; top: 60px; z-index: 1;}
.category-nav ul {margin: 0; padding: 0;}
.category-nav li {list-style: none; display: inline;}
.category-nav a {padding: 16px 48px; background-color: green; color: white; display: inline-block;}
.category-nav a.active {background-color: orange;}

.category {border: 1px solid #333; padding: 24px; margin-bottom: 24px;}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）