1

http://communitychessclub.com/index.phpで position:fixed メニューを使用して、ユーザーがスクロールしてもメニューを画面に表示したままにします。

CSS:

#sticky {margin:0 auto; display:table}
#sticky.stick {position: fixed;  top: 0; margin-left:48px; z-index: 10000; }

JS:

<script>
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
        $('#sticky').addClass('stick')
    else
        $('#sticky').removeClass('stick');
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

$(window).scroll((function() {
    var a='',  // a buffer to the hash
    w = $(window);
    return function() {
        var h = location.hash;
        // if hash is different from the previous one, which indicates
        // the hash changed by user, then scroll the window down
        // update the buffer
        if (h != a) {            
            a = h;           
            w.scrollTop(w.scrollTop()-150)
        }
    };
})());
</script>

しかし、同じページの ID にリンクすると、画面が突然スクロールするという苦情が寄せられています。そこで、 http://www.spydertrap.com/blog/2012/08/user-experience-jquery-smooth-page-anchor-transitions/で「jQuery Smooth Page Anchor Transitions を使用したユーザー エクスペリエンスの向上」を見つけ、デモを気に入りました。とても気に入ったので、スムーズな jquery スクロールのために、以下の jquery コードと上記の jquery コードをブレンドしたいと思います。

彼らはこれを使用します（ただし、他のバージョンがここに存在します...問題は2つを結合する方法です）

jQuery コード:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $(id).offset().top},'slow');
}

HTML:

<ul class="nav">
    <li><a href="#chapter1">Chapter 1</a></li>
    <li><a href="#chapter2">Chapter 2</a></li>
    <li><a href="#chapter3">Chapter 3</a></li>
</ul>

JS ランチャー:

$(document).ready(function(){
    $('.nav a').click(function(){
        goToByScroll($(this).attr('href'));
        return false;
    });
});

上記のjqueryコードと統合することは可能ですか?

4

1 に答える 1

0

Chrome ブラウザーの JS コンソールを介してページをハッキングして、これを試しました。goToByScroll関数verbatimを追加してから、これを実行しました。

$('#sticky a').click(function(){
    goToByScroll($(this).attr('href'));
    return false;
});

そして案の定、アンカー ID 間をスクロールします。実際のアンカー リンクではないナビゲーション バーのリンクをクリックすると、例外がスローされるという小さな問題があります (たとえば、'Home' はホームページを指し、'Chess Camp' はポップアップを開きます)。したがって、スクロールしたいアンカーリンクにクラスを追加してから、そのクラスをセレクターに追加できます。

たとえば、スティッキー メニュー バーのマークアップを次のように変更します。

<li><a href="http://www.chessset.com/">Chess Center</a>
    <div><ul>

        <li><a class="anchor" href="#cc_events">about the RCC</a></li>

        <li><a href="#" onclick="TINY.box.show({url:'RCC_chess_lessons.php',boxid:'RCC_chess_camp', width:950, height:650}); return false;">chess camp</a></li>

        <li><a href="#" onclick="TINY.box.show({url:'RCC_Marchand_Open.php',boxid:'RCC_marchand', width:1000,height:600}); return false;">Marchand Open</a></li>

        <li><a href="#" onclick="TINY.box.show({url:'RCC_weekly_schedule.php', boxid:'RCC_schedule', width:775, height:600}); return false;">weekly schedule</a></li>

        <li><a class="anchor" href="#picnic">annual picnic</a></li>

        <li><a href="http://www.chessset.com/">Chess gear sale</a></li>

    </ul></div>
</li>

class="anchor"(同じページのハッシュを指すすべてのリンクに追加されました。)

そして、これをあなたのjavascriptに追加してください：

// sticky_relocate function here

// Add this function exactly from your example
function goToByScroll(id){
    $('html,body').animate({scrollTop: $(id).offset().top},'slow');
}

// modify your onReady jQuery handler to this:
$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();

    // Added the .anchor to the selector
    $('#sticky a.anchor').click(function(){
        goToByScroll($(this).attr('href'));
        return false;
    });
});

// your $(window).scroll goes here

エラーをスローすることなく、これでうまくいくはずです。

于 2012-11-21T23:06:16.390 に答える