开发者

Floating Twitter Icon on Page Scroll

开发者 https://www.devze.com 2023-03-28 05:32 出处:网络
Could you please tell me how this web site m开发者_如何学Pythonanaged to do this? http://weblopedi.net/

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

精彩评论

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

关注公众号