【问题标题】:Sticky Navigation with Smooth Scrolling is jumping带有平滑滚动的粘性导航正在跳跃
【发布时间】:2012-10-10 05:55:10
【问题描述】:

我在使用棒状导航和平滑滚动时遇到了各种各样的问题。我只是对 jQuery 了解不足,无法进行故障排除。我正在使用来自 Chris Coyer 的平滑滚动 sn-p:http://css-tricks.com/snippets/jquery/smooth-scrolling/。我的页面在这里:http://clients.ekcetera.com/agivingchance

这是我的问题:

  1. 对于任何导航项目,它会部分滚动,然后跳转到该位置。我很确定这是因为我不知道如何解释粘性标题,所以我将锚点放高一点以考虑锚点的高度。因此,它到达锚点并停止,然后跳转到正确的视图。
  2. 单击后退按钮时,它似乎并不总是转到正确的位置 - 有时它非常随机。我认为这与问题1有关,希望它会自行解决。我什至可以完全删除浏览器历史记录/后退按钮,但就像我说的那样,JQuery 大师还不足以知道要删除什么。

有什么建议吗?

提前致谢!

【问题讨论】:

    标签: jquery header navigation sticky smooth-scrolling


    【解决方案1】:

    1. 使用来自Devin Sturgeon 的关于平滑的评论中的代码 滚动帖子。另外,我添加了一些减法来弥补 你的粘性标题。根据喜好调整。

    // your functions go here 
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
    
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top - 181
                }, 1000);
                return false;
            }
        }
    });
    

    2.将所有锚点移动到您要滚动到的实际元素。

    (参考:http://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181

    【讨论】:

      猜你喜欢
      • 2015-05-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-12-03
      • 1970-01-01
      • 1970-01-01
      • 2018-01-19
      相关资源
      最近更新 更多