4

我注意到在滚动到顶部动画发生之前，屏幕会闪烁。
这可以在以下位置看到：http ://www.dreamtheater.co.il

要重新创建：

  1. 向下滚动，直到菜单栏仅保留在顶部
  2. 单击菜单中最右侧的链接

HTML 的正文是这样的：<body id="top">.
和 JavaScript（最底部的相关代码）：

$(function() {
    var stickyHeader = $('#menubar').offset().top;

    $(window).scroll(function() {
        if ($(window).scrollTop() > stickyHeader) {
            ...
            ...
            $("a[href='http://www.dreamtheater.co.il/index/']").attr('href', '#top');
        } else {
            ...
            ...
            $("a[href='#top']").attr('href', 'http://www.dreamtheater.co.il/index/');
        }
    });

    $('#top').on("click",function() {
        $('body,html').animate({ scrollTop: 0 }, 'slow')
    });
});
4

3 回答 3

6

好的，似乎问题有两个方面：

  1. 我指<body id="top">的是href，我也可以在滚动时动态更改
  2. 没有“发布”事件

它现在运行顺畅，没有闪烁，如下所示：

$("#menubar").on("click", "#menu a[href='#top']", function(){
    $('body,html').animate({ scrollTop: 0 }, 'slow');
    return false;
});
于 2013-10-05T06:19:54.903 回答
1

好吧，据我了解。这是重新计算元素的大小和定位的问题。

我建议您将 #menu 设置为 position:absolute 而不是 position:static。

因此，当您将菜单位置 css 从绝对更改为固定时，浏览器将不需要重新计算其他元素的位置和大小，因为这两个位置（绝对和固定）都在其他元素之上，不影响然后“物理上”

于 2013-10-04T13:34:17.023 回答
0

我认为，带有事件变量的变体更清晰：

$("#menubar").on("click", "#menu a[href='#top']", function(e){
    e.preventDefault();
    $('body,html').animate({ scrollTop: 0 }, 'slow');
});
于 2014-02-28T17:16:30.943 回答