js 进行平滑滚动答案

【问题标题】：js Make a smooth scrolljs 进行平滑滚动
【发布时间】：2013-02-02 15:30:20
【问题描述】：

我真的有一个关于滚动事件的问题。我试图整夜解决它，但我不能。

我正在尝试在顶部放置导航。当$(window).scrollTop()通过导航点之前的点时，将处理棒效果。

问题是，在 IE 和 Chrome 上会出现“闪烁”效果（类似于延迟过程），但在 Firefox 上不会。

在我的研究中，我知道 Firefox 默认具有“平滑滚动”功能。

但是，请在 Chrome 或 IE 上查看此示例

http://www.backslash.gr/demos/jquery-sticky-navigation/

像火狐一样流畅，代码就是这么简单......

关键是，我正在做与这个示例完全相同的事情，但为什么我有“眨眼”效果？？

是 CSS 的诀窍吗？？

有没有什么方法可以像 js 上的 firefox 一样创建一个平滑的 scrool？？

非常感谢您的帮助。

$(window).on('scroll', Sticky);

function Sticky(){
    $(this).scrollTop() > anchor.offset().top
    ? nav.css({ 'position': 'fixed', 
                      'z-index': z_index, 
                       top: y, 
                       left: x, })
    : nav.css({ 'position': 'static', });
};

【问题讨论】：

也许你应该发布你正在做的不起作用的事情。
也许你应该只使用你链接到的那个已经有效的？
我无法实现同样的事情......我更想知道诀窍......
@Samuel Edwin Ward，我已经更新了我的代码
“眨眼效果”到底是什么意思？也许问题在于您将元素从静态定位移动到固定定位。通过这样做，元素占用的空间被移除，所以它下面的所有东西都会向顶部移动一点。

标签： javascript jquery css scroll

【解决方案1】：

我认为您可能在这里混淆了两件事。

查看您已链接到的工作代码。如果您使用鼠标滚轮在 chrome 或 IE 或 firefox 上滚动，那里会出现闪烁。
眨眼是因为你突然改变了姿势。尝试更改 js，使其为位置设置动画，而不是突然更改其值。

正如其他人所说，链接到工作代码并通过展示技巧来期待答案可能对我们所有人都没有帮助。尝试在js的位置变化线上添加动画，看看是否有帮助。

这里没有技巧。全部在代码中，因此请阅读源代码并享受。

【讨论】：

stackoverflow.com/questions/938655/… 看看这个。您不必为菜单设置动画，您可以为页面设置动画以将其取回，因此菜单位于顶部。就像你移动到顶部一样。

【解决方案2】：

查看不完整的示例代码真的很难确定发生了什么，所以请用完整的代码更新您的问题，或者更好 - 上传JSFiddle 以作为示例，我们可以根据需要直接更新它变化。到目前为止（根据我之前所说的），由于示例代码中的错别字，您似乎得到了flickering 效果：

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   top: y, 
                   left: x, })
: nav.css({ 'position': 'static', });

你没有终止需要应用的 CSS 属性和值的数组（你用逗号结束它 ,），并且你没有用单引号括起来一些 CSS 属性 @987654327 @。 您的代码应该是：

? nav.css({ 'position': 'fixed', 
                  'z-index': z_index, 
                   'top': y, 
                   'left': x })
: nav.css({ 'position': 'static' });

当然，前提是您已经事先设置了变量z_index、y 和x。

编辑和免责声明：我使用原始演示代码创建了一个新的JSFiddle。您提到的演示是受版权保护的，所以如果这对您有帮助，请将您的感谢归功于原作者而不是我。不过，我在JSFiddle 上发布的代码可以免费下载。所以我想也可以将它用于演示目的。更改该代码以符合您的要求，并在您更新它的每个步骤将其更新为新版本。它将帮助您跟踪您做错了什么（如果有的话）。 ;)

【讨论】：