Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Easing effect for position:fixed div

Easing effect for position:fixed div

Problem

i want to add blog icon in my website
its position fixed ,bottom:50px; right 10px;
At the time of page scroll, i want to add an easing effect on the icon(eg: some social media widgets available in wordpress socialmedia icon demo link). At the time of scrolling, the icon must move up or down according to the scroll and later it must retain its position and settle.

Problem courtesy of: Sebin Simon

Solution

I got solution
I hope it will help someone! HTML

blog


CSS

.blog_button{
   position: absolute;
   right:0;
   top:50%;
   z-index: 5000;
 }


jQuery--

 $(window).scroll(function(){

     var bb= $(document).scrollTop();
     var ac_height=$( window ).height()/2.3;
     bb=parseInt(bb)+parseInt(ac_height);
     var h=bb+'px'
     $('.blog_button').animate({top:h},50);
 });
Solution courtesy of: Sebin Simon

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Easing effect for position:fixed div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×