1

#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) を計算する必要があります。これがオフセット (+ padding-bottom の場合は 10px)。メニューが上に固定されていないため、メニューの上の div が表示されている場合 (#unstickyheader)、オフセットはメニューの高さ (#stickyheader) + div の高さ (#unstickyheader) である必要があります。

最初のdivが表示されているかどうかに応じて、2つのdivの合計の高さを計算する方法と、メニューをクリックするたびに計算する方法がわかりません...

それについてどう思いますか ？別の解決策はありますか？

ここでJSfiddleを作成しましたhttp://jsfiddle.net/uFq2k/359/

この例のオフセットは 90 であるため、div (#unstickyheader) が表示されているときにメニュー項目をクリックすると、メニューとセクション タイトルの間のパディング (「ディスコグラフィー」など) は正しいのですが、その後の別のリンク、伝記としましょう。パディングが大きすぎます...約50になるはずです...

私の質問を理解していただければ幸いです。説明するのは難しいですが、私の JSfiddle をテストすると、問題を理解できるはずです。

助けてくれてありがとう！

4

1 に答える 1

0

私はこれがあなたが望むものだと信じています: 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;
        });
    });
});
于 2013-10-30T17:57:50.200 に答える