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

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


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


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

例子1、jquery smartFloat智能定位

HTML代码：

 代码如下 复制代码

<div class="float" id="float">
    我是个腼腆羞涩的浮动层...
</div>

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 ：

 代码如下 复制代码

<div id="gotop"></div>

在head中增加样式

 代码如下 复制代码

<style type="text/css">
#gotop{
    display:none;
    width:55px;
    height:55px;
    position:fixed;
    right:50px;
    bottom:50px;
    background:url(<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/images/backtop2013.png) no-repeat -70px 0px;   
}
</style>

接着，就是Jquery代码了：

 代码如下 复制代码

<script type="text/javascript">
function goTop()
{
    $(window).scroll(function(e) {
        //若滚动条离顶部大于100元素
        if($(window).scrollTop()>100)
            $("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素
        else
            $("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素
    });
};
$(function(){
    //点击回到顶部的元素
    $("#gotop").click(function(e) {
            //以1秒的间隔返回顶部
            $('body,html').animate({scrollTop:0},1000);
    });
    $("#gotop").mouseover(function(e) {
        $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px");
    });
    $("#gotop").mouseout(function(e) {
        $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px");
    });
    goTop();//实现回到顶部元素的渐显与渐隐
});
</script>
时间： 2024-09-23 09:45:17

jquery页面滚动浮动层智能定位种代码的相关文章

jQuery页面滚动浮动层智能定位实例代码_jquery

HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q

MooTools 页面滚动浮动层智能定位实现代码_Mootools

HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: var $smartFloat = function(elements) { var position = function(element) { var top = element.getPosition().y, pos = element.getStyle(&q

js页面滚动时层智能浮动定位实现

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js页面滚动时层智能浮动定位实现(jQuery/MooTools)_jquery

一.应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下: 随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示: 类似的效果在新浪微博上也有: 当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示: 此效果实现原理其实很简单,本文就将展示其实现.  二.实现原理 默

jQuery实现div浮动层跟随页面滚动效果

 这篇文章主要介绍了jQuery实现div浮动层跟随页面滚动效果,需要的朋友可以参考下  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"

jquery页面滚动事件的使用

在现在更加追加页面加载速度和用户体验的情况下,页面的滚动事件使用的越来越多.通常我们使用滚动事件主要做的事情主要有: ajax异步加载,加快页面首次加载的速度 懒加载(或延迟加载):先把HTML元素放到textarea标签中,或把img的链接先放到一个字段里,页面滚动到某个位置时才进行开始加载 顶部导航或侧边导航的焦点跟踪 侧边数字导航的跟踪(例如百度经验) "回到顶部"功能 这两天做了一个demo,大家可以参考一下:页面滚动效果   上图中指出了用滚动事件实现的功能,不过demo中没

jQuery页面加载初始化的3种方法(推荐)_jquery

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种:   $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQu

jQuery实现滚动切换的tab选项卡效果代码_jquery

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-

jQuery实现div浮动层跟随页面滚动效果_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu