javascript - anchor 定导航至顶部菜单…需要为 anchor 定添加动态偏移

我的菜单和基于#anchors的导航出现问题。
我正在使用JS函数在滚动时使菜单显示在顶部（#stickyheader）。我的菜单上有一个div，在滚动时会消失（#unstickyheader）。此div的高度不是固定的，取决于它的内容长度以及屏幕的宽度。
我的菜单垂直链接到页面的不同部分，在处理锚导航的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>

和javascript：

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

//-------------------------------------------------- # SCROLL ----------------------------------------------------//

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

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

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-90
            //--OFFSET--//
        }, 2000, 'swing', function () {
            window.location.hash = target;
        });
    });
});

我的问题是我需要动态生成此偏移量。每次单击菜单上的任何项目时，偏移量都需要检查我的菜单（#stickyheader）是否粘贴在页面顶部，然后计算菜单的高度（#stickyheader），这就是偏移量（+底部为10px）。如果我的菜单没有放在顶部，则显示菜单的div上限（#unstickyheader），则偏移量应为菜单的高度（#stickyheader）+ div的高度（#unstickyheader）。

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

你对那个怎么想的 ？还有其他解决方案吗？

我在这里做了一个JSfiddle，http://jsfiddle.net/uFq2k/359/

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

我真的希望您理解我的问题，这对我来说很难解释，但是如果您测试我的JSfiddle，则应该理解该问题。

非常感谢你的帮助 ！

最佳答案

我相信这就是您想要的：http://jsfiddle.net/B5dYv/

问题是#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;
        });
    });
});

关于javascript - anchor 定导航至顶部菜单…需要为 anchor 定添加动态偏移，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19688787/