錨定到頂部菜單導航…需要為錨定添加動態偏移量

Question

我的菜單和基於#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，則應該理解該問題。

非常感謝你的幫助 ！

Answer 1

我相信這就是您想要的： 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;
        });
    });
});