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 滚动。

他们使用这个（但这里存在其他版本......问题是如何加入两者）

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，然后执行了这个：

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

果然，它在锚 ID 之间滚动。当您单击导航栏中不是实际锚链接的链接（例如，“主页”指向主页，“国际象棋训练营”打开一个弹出窗口）时，会引发一个小问题。因此，您可以向要滚动的锚链接添加一个类，然后将该类添加到选择器中。

例如，将粘性菜单栏的标记修改为如下所示：

<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 回答