jQuery 动画页面滚动,带有固定标题的偏移量,闪烁褪色的内容

发布于 2024-12-05 04:49:28 字数 330 浏览 1 评论 0原文

我的网站上有一个固定的标题/导航,页面在其下方滚动(类似于 Twitter)。我试图让它平滑地滚动到页面内的文章,同时考虑标题的高度,以免覆盖文章的顶部部分。

我想我已经有了标题高度偏移,但滚动非常不稳定且不一致,并且使用导航时所有不透明度褪色的内容都会闪烁。

请在此处查看测试:http://sketch.ryantroyford.com/newSite/testSite.html

知道问题出在哪里吗?提前致谢!

I've got a fixed header/navigation on my site, which the page scrolls under (similar to Twitter). I'm trying to get it to smoothly scroll to articles within the page, while accounting for the height of the header, as not to cover up the top portion of the articles.

I think I've got the header height offset going, but the scroll is pretty choppy and inconsistent, and all the content with faded opacity blinks on when the navigation is used.

please see a test here: http://sketch.ryantroyford.com/newSite/testSite.html

Any idea what the problem could be? thanks in advance!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

远山浅 2024-12-12 04:49:28

使用此处找到的代码 http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/ - 您可以将偏移量调整为如下:

 $('html, body').stop().animate({
     scrollTop: ($($anchor.attr('href')).offset().top-150)
    }, 1500,'easeInOutExpo');

注意:-150,调整该数字以反映固定标题的大小。

Using this code found here http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ -- you can adjust the offset as follows:

 $('html, body').stop().animate({
     scrollTop: ($($anchor.attr('href')).offset().top-150)
    }, 1500,'easeInOutExpo');

Note: the -150, adjust that number to reflect the size of your fixed header.

山色无中 2024-12-12 04:49:28

使用 jQuery 的缓动插件和位于此处的脚本: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery/

这将修复滚动和闪烁的问题,但我正在研究固定标头的偏移量。我现在只是在寻找解决方案,这就是我来到这里的原因。

Use the easing plugin for jQuery and the script located here: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

That will fix the choppy scrolling and blinking, but I'm working on the offset for the fixed header. I was just looking for the solution now and that's what brought me here.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文