延迟显示 div

发布于 2024-12-22 15:44:42 字数 273 浏览 2 评论 0原文

我有一个浮动/静态工具栏，我想延迟它，直到访问者向下滚动页面一段距离。我尝试过使用delay()和scroll()函数，但没有成功。我可能走在正确的道路上，但语法不正确。

比如说，这是我的工具栏（如下）...我需要在脚本中添加什么来延迟显示它（javascript/jquery）？而且，当我们这样做时，有什么方法可以让它淡出打开状态吗？

<div class="toolbar">
<ul></ul>
</div>

原文

I have a floating/static toolbar that I would like to delay until the visitor has scrolled down the page some distance. I have tried using delay() and scroll() functions, but without success. It's possible I'm on the right trail, but incorrect syntax.

Say, for example, this is my toolbar (below)...what would I need in the script to delay showing it (javascript/jquery)? And, while we're at it, any way to fade it open?

<div class="toolbar">
<ul></ul>
</div>

分享到QQ

分享到微博

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

发布评论

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

掌心的温暖 2024-12-29 15:44:42

当用户滚动页面时，下面的 JQuery 脚本将显示工具栏 div。

注意：页面必须可滚动才能触发事件，因此页面内容必须高于窗口。

<script>
  $(window).scroll(function () { 
    $(".toolbar").fadeIn("slow"); 
  });
</script>

该脚本会在预设的延迟后淡入工具栏 div。

<script>
  $(document).ready(function () { 
    $(".toolbar").delay(800).fadeIn(10000); 
  });
</script>

将任一脚本直接放在页面的结束标记上方，并确保您的部分中有指向 JQuery 库的链接

The JQuery script below would reveal the toolbar div when the user scrolls the page.

NOTE: The page must be scrollable for the event to fire so the page content must be higher taller than the window.

<script>
  $(window).scroll(function () { 
    $(".toolbar").fadeIn("slow"); 
  });
</script>

This script would fade the toolbar div in after a pre-set delay.

<script>
  $(document).ready(function () { 
    $(".toolbar").delay(800).fadeIn(10000); 
  });
</script>

Place either of the scripts directly above the closing </body> tag of your page and ensure you have a link to the JQuery library in your <head> section

回复收藏 0 原文

~没有更多了~