开发者

Floating Twitter Icon on Page Scroll

Could you please tell me how this web site m开发者_如何学Pythonanaged to do this?

http://weblopedi.net/

There is a Twitter bird floating all around the web page (Not randomly I guess) When I scroll down, the bird follows me and flies around :)

Is there a pllug-in for it?

Update: I just found it's a Wordpress gadget. But how can I use it on my web site (Not blog)? Anyway, I'm gonna look at the source code.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜