当前位置：文江博客话题详情

页面滚动上的浮动 Twitter 图标

发布于 2024-11-29 23:55:28 字数 255 浏览 1 评论 0原文

您能告诉我这个网站是如何做到这一点的吗？

http://weblopedi.net/

有一只 Twitter 小鸟漂浮在网页周围（我猜不是随机的）当我向下滚动时，小鸟跟着我飞来飞去:)

有插件吗？

更新：我刚刚发现它是一个 WordPress 小工具。但是我如何在我的网站（不是博客）上使用它？无论如何，我还是要看看源代码。

原文

分享到QQ

分享到微博

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

发布评论

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

浅沫记忆 2024-12-06 23:55:28

一个快速的答案是将 div 或元素设置为绝对位置，并为其指定比您希望其浮动的页面其余部分更高的 z-index。然后通过窗口滚动事件上的 JavaScript 来控制它。例如，如果使用 jQuery，您可以使用scrollTop() 并使用偏移量来设置 twitter 浮动小鸟的 y 位置。

类似于：

<div id="BirdDiv" style="position: absolute; z-index: 999;">
     <img src="twitterbird.png" alt="" />
</div>

然后在 Javascript 中

$(window).scroll(function () {
    var offset = 150;
    var topVal = $(window).scrollTop() + offset;
    $("#BirdDiv").offset({ top: topVal, left: 300 });
});

A quick answer is to set a div or element to absolute position and give it a higher z-index than the rest of the page you want it to float over. Then control it via Javascript on a window scroll event. For example, if using jQuery you could use scrollTop() and have an offset to set the y positioning of the twitter floating bird.

Something like:

<div id="BirdDiv" style="position: absolute; z-index: 999;">
     <img src="twitterbird.png" alt="" />
</div>

Then in Javascript

$(window).scroll(function () {
    var offset = 150;
    var topVal = $(window).scrollTop() + offset;
    $("#BirdDiv").offset({ top: topVal, left: 300 });
});

回复收藏 0 原文

~没有更多了~