jquery - 位置 :fixed div 的缓动效果

标签 jquery html css

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

最佳答案

通过使用一些 JS 代码 你可以达到那个效果。

这里是用到的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/

关于jquery - 位置 :fixed div 的缓动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22086843/

相关文章:

javascript - 无法使用 jQuery 更改主体上的 'animation-duration' CSS

jquery - 将鼠标悬停在父项上时如何切换内部内容

html - 悬停时更改 <li> 背景

javascript - 在循环中自动向多个 ID 添加和删除事件类

javascript - jQuery .size() 函数不适用于变量

javascript - jquery attr 无法正常工作

javascript - Jquery 条件不起作用

javascript - 使用 jQuery 向下滚动到图像底部时使用图像在 div 中设置动画

html - xsl 为每个节点创建折叠/展开面板

javascript - 使用javascript设置图像位置,并不总是正确放置