Javascript 使用“粘贴到顶部”菜单锚定导航。。。需要向锚点添加动态偏移

我的菜单和基于#锚的导航有问题。 我使用JS函数在滚动（#stickyheader）时将菜单置于顶部。我的菜单上有一个div，在滚动时消失（#unstickyheader）。这个div的高度不是固定的，它将取决于它的内容长度和屏幕的宽度。 我的菜单垂直链接到我的页面的不同部分，在处理锚导航的my js函数中，我有一个偏移量值，用于在我的菜单下显示我的节标题，并使用定义的填充：

$target.offset().top-90

这是我的css：

html,body{padding:0;margin:0;font-family: Helvetica, Geneva, Arial sans-serif;font-size:16px;;color: black;line-height: 24px;color: black;text-transform: lowercase;letter-spacing: 1px;background-color: white}

#wrapper{margin-left: 30px;margin-right: 30px;padding-bottom: 20px;}
#entry{position: relative}
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;background-color: white;padding-bottom: 10px;line-height: 24px;}
#unstickyheader {height:auto;padding-top:20px;}
.page{min-height: 3000px}
.separation{height: 600px;
background-color: white;
width: 100%;
margin-top: 300px;
margin-bottom: 300px;}

我的html：

<div id="wrapper">
    <div id="unstickyheader">
        <div class="bloc_bio">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
        </div>
    </div>

    <div id="stickyheader">
        <a href="#disco">discography</a><span class="grey"> - </span>
        <a href="#bio">biography</a><span class="grey"> - </span>
        <a href="#press">press</a><span class="grey"> - </span>
        <a href="#studio">studio</a><span class="grey"> - </span>
        <a href="#contacts">contacts</a> 
    </div>

    <div id="entry">

        <div class="page">
        <div class="separation"></div>
            <div id="disco" class="ancre"></div>
            <div class="bloc_bio">
                <div class="legende">DISCOGRAPHY</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
            </div>
            <div class="separation"></div>

            <div id="bio" class="ancre"></div>
            <div class="bloc_bio">
                <div class="legende">BIOGRAPHY</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
            </div>
            <div class="separation"></div>

            <div id="press" class="ancre"></div>
            <div class="bloc_bio">
                <div class="legende">PRESS</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
            </div>
            <div class="separation"></div>

            <div id="studio" class="ancre"></div>
            <div class="bloc_bio">
                <div class="legende">STUDIO</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor dignissim mollis. Nam tempor tristique ultricies. Nullam blandit aliquet augue, et elementum elit. Morbi at enim ut magna semper varius. Curabitur purus turpis, condimentum at ullamcorper vel, adipiscing vel enim. Phasellus hendrerit semper nisi quis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur egestas nibh nunc, ac facilisis dui ultricies eget. Integer vestibulum ultricies diam, ut laoreet risus. Morbi suscipit venenatis tortor sit amet faucibus. Ut eu justo elementum, ultrices elit in, eleifend enim.
            </div>
            <div class="separation"></div>

        </div>
    </div>
</div>

我的问题是我需要动态生成这个偏移量。每次单击“我的菜单”中的任何项目时，偏移量需要检查“我的菜单”（#stickyheader）是否粘贴到页面顶部，然后计算“我的菜单”（#stickyheader）的高度，这将是偏移量（+10px，用于填充底部）。如果我的菜单未粘贴到顶部，则会显示我的菜单上的div upp（#unstickyheader），偏移量应为我的菜单的高度（#stickyheader）+div的高度（#unstickyheader）

我不知道如何计算两个div的总高度，这取决于是否显示第一个div，以及如何在我的菜单中每次单击时计算

你觉得怎么样？还有别的解决办法吗

我在这里打了个盹

示例中的偏移量是90，因此当我在显示我的div（#unstickyheader）时单击菜单项时，我的菜单和我的节标题之间的填充（例如“discography”）是正确的，但当我单击之后的另一个链接（比如传记）时，填充太大了…应该在50左右

我真的希望你理解我的问题，我很难解释，但是如果你测试我的JSFIDLE，你应该理解这个问题

---

非常感谢你的帮助

我相信这就是你想要的：

问题是#stickyheader在固定和其他显示值之间切换。这导致了其他元素偏移量的更改，因为修复有效地从dom堆栈中删除了元素，这最终导致了错误的滚动值

我所做的不是在静态和固定之间切换#stickyheader，而是相对和固定

此外，解决滚动问题的主要方法是通过检查#stickyheader的位置和高度，从而检查所需的动态偏移量，有条件地设置滚动偏移量

$(document).ready(function () {
    $('a[href^="#"]').bind('click.smoothscroll', function (e) {
        e.preventDefault();

        var target = this.hash,
            $target = $(target);

        var offset;
        if($('#stickyheader').css('position') == 'relative'){
            offset = $('#stickyheader').outerHeight(true)*2;
        }else{
            offset = $('#stickyheader').outerHeight(true);
        }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - offset
            //--OFFSET--//
        }, 2000, 'swing', function () {
            window.location.hash = target;
        });
    });
});

---

也许你可以帮我解决另一个小问题，当我点击我的任何菜单项时，我有一个a：悬停改变我的链接颜色。。。我想知道是否有可能在单击后保留更改的颜色，并在单击其他链接时返回原始颜色。。。我已经在JSFIDLE:中添加了我的a，a:hover样式，所以当我单击传记时，它会变成红色，直到我单击我的项目中的另一个链接。。。我无法找到解决方案，非常感谢您的帮助！！！我只需将目标元素更改为红色，并在单击事件中从红色中删除任何其他元素的颜色。是的，粘性菜单和主播不能很好地配合=(

$(document).ready(function () {
    $('a[href^="#"]').bind('click.smoothscroll', function (e) {
        e.preventDefault();

        var target = this.hash,
            $target = $(target);

        var offset;
        if($('#stickyheader').css('position') == 'relative'){
            offset = $('#stickyheader').outerHeight(true)*2;
        }else{
            offset = $('#stickyheader').outerHeight(true);
        }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - offset
            //--OFFSET--//
        }, 2000, 'swing', function () {
            window.location.hash = target;
        });
    });
});