一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery页面滚动浮动层智能定位种代码

时间:2014-06-11 编辑:简简单单 来源:一聚教程网

我看到一个站长博客效果如下

jquery页面滚动浮动层智能定位种代码


然后我们看到最多的一般是这种

jquery页面滚动浮动层智能定位种代码


那么我们要如何实现第一种效果呢,问了那朋友说只要搜索 jquery 浮动层就可以解决了,搜索了一下发现几段代码非常的不错,一段是jquery浮动插件,另一种是zblog自带的功能,我都整理一下。

例子1、jquery smartFloat智能定位

HTML代码:

 代码如下 复制代码


    我是个腼腆羞涩的浮动层...

JS代码:
$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });   
                } else {
                    element.css({
                        top: scrolls
                    });   
                }
            }else {
                element.css({
                    position: "absolute",
                    top: top
                });   
            }
        });
    };
    return $(this).each(function() {
        position($(this));                        
    });
};

//绑定
$("#float").smartFloat();

例子2、jquery scroll定位效果

先在html中增加一个div :

 代码如下 复制代码

在head中增加样式

 代码如下 复制代码

接着,就是Jquery代码了:

 代码如下 复制代码

热门栏目