缓动位置：固定格

我想在我的网站上添加博客图标
其位置固定，底部：50px;右10px;
在页面滚动时，我想为图标添加缓动效果（例如：在wordpress socialmedia icon demo link中可用的一些社交媒体小部件）。在滚动时，图标必须根据滚动向上或向下移动，之后它必须保持其位置并稳定下来。缓动位置：固定格

来源

2014-02-28 Sebin Simon

查找[CSS转换属性（HTTP：// CSS-技巧.com/almanac/properties/t/transition /）easing。 –

我需要完全像这里显示的社交媒体图标 - > http://www.acurax.com/products/floating-social-media-icon-plugin-wordpress/ –

我得到了解决
我希望这会帮助别人！ HTML

<a class="blog_button" href="#" title="Blog"><img src="images/blog_butn.png" alt="blog"></a>

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); 
});

来源

2014-02-28 06:10:54

通过使用一些JS code您可以达到此效果。

这里是这里使用的Js代码。

$().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 

     $(window).scroll(function(){    
      $scrollingDiv 
       .stop() 
       .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");   
     }); 
    });

CSS这里使用

#scrollingDiv{background-color:red; padding:5px; font-size:15px; position:fixed; top:0; right:0;}

这里的工作演示http://jsfiddle.net/SAVF7/9/

来源

2014-02-28 05:40:22

你必须使用绝对的，而不是固定的位置，并使用这个脚本：

JAVASCRIPT

$(document).ready(function() { 
    var $yourDiv = $("#scrollingDiv"); 
    $(window).scroll(function(){    
     $yourDiv.stop().animate({"marginTop":($(window).scrollTop() + 10) + "px"}, "300"); 
    }); 
});

CSS

#scrollingDiv{background-color:green; padding:5px; font-size:15px; position:absolute; top:0; right:0;}

这里是fiddle DEMO此：

来源

2014-02-28 08:50:23 Alex

我得到的答案如下 –

缓动位置：固定格

回答

相关问题