<!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-Type" content="text/html; charset=gb2312" />

<title>固定浮动侧边栏</title>

<style type="text/css">

	body {

		margin: 10px auto;

		font-family: sans-serif;

		width: 500px;

	}

	div {

		border-radius: 5px;

		box-shadow: 1px 2px 5px rgba(0,0,0,0.3);

		border: 1px solid #ccc;

		padding: 5px;

	}

	#sidebarWrap {

		height: 400px;

		width: 210px;

		float: right;

		position: relative;

		box-shadow: none;

		border: none;

		margin: 0;

		padding: 0;

	}

	#main {

		width: 270px;

		height: 4000px;

	}

	#footer {

		clear: both;

		margin: 10px 0;

	}

	#sidebar {

		width: 200px;

		height: 300px;

		position: absolute;

	}

	#header {

		height: 200px;

		margin-bottom: 10px;

	}

	#sidebar.fixed {

		position: fixed;

		top: 0;

	}

	#footer { height: 600px; }

</style>

</head>

<body>

    <div id="header">header</div>

    <div id="sidebarWrap">

        <div id="sidebar">Sidebar</div>

    </div>

    <div id="main">

        Main

    </div>

    <div id="footer">

        footer

    </div>

</body>

</html>

<script src="../Js/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));

    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar').outerHeight();

    $(window).scroll(function(evt) {

        var y = $(this).scrollTop();

        if (y > top) {

            if (y < maxY) {

                $('#sidebar').addClass('fixed').removeAttr('style');

            } else {

                $('#sidebar').removeClass('fixed').css({

                    position: 'absolute',

                    top: (maxY - top) + 'px'

                });

            }

        } else {

            $('#sidebar').removeClass('fixed');

        }

    });

});

</script>

固定浮动侧边栏（SmartFloat）的更多相关文章

  1. jQuery固定浮动侧边栏(jQuery fixed Sidebar)

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的 ...

  2. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  3. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  4. eclipse-12.04无图标，无法固定到侧边栏

    今天下载了adt-bundle,但是eclipse打开以后,侧边栏显示的是一个问好,而且没办法固定到侧边栏,导致每次打开eclipse都要进入到相应目录,很麻烦.我们可以通过如下方法设置eclipse ...

  5. 鼠标滚动div固定浮动-加锚点

    页面:    <div class="pa">        <div class="w-95-sl bdl-2"><a>标 ...

  6. 微信小程序 添加左边固定浮动框

    view: <!-- 悬浮框 --> <view class="v-fixed-title1"> <view class="v-fixed- ...

  7. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

  8. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

随机推荐

  1. dubbo常见错误

    1.dubbo zookeeper注册中心provider的ip地址为内网ip,导致consumer连不上 我用的阿里云的服务器,host默认配置了内网ip,注销或删除即可 vim /etc/host ...

  2. 远程FTP下载文件

    现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...

  3. 洛谷P1048 采药

    题目OJ地址 https://www.luogu.org/problemnew/show/P1048 https://vijos.org/p/1104 题目描述辰辰是个天资聪颖的孩子,他的梦想是成为世 ...

  4. CAP二十年：“规则”变了

    本文是原文https://www.cnblogs.com/cobbliu/p/7494961.html的译文,原链接:http://www.infoq.com/cn/articles/cap-twel ...

  5. Jexus 5.4.6 on CentOS 6.6

    Mono 通过脚本安装 https://github.com/cjy37/linux-asp.net-installScript 版本 3.10 MongoDB 也可通过以上脚本安装 默认端口 270 ...

  6. 分析轮子（六）- LinkedList.java

    注:玩的是JDK1.7版本 一:先上类的继承结构图 二:再看一下他的底层实现数据结构 三:然后从源码中找点好玩的东西 1)双向链表的结构构成元素,头指针.尾指针.节点信息(前向指针.后向指针.节点信息 ...

  7. CentOS 7.2编译安装Tengine

    Tengine官网上有个非常简单的教程,中间并未涉及到一些常用的设置,所以仅供参考.一下午为本人的安装步骤及过程. 配置firewalld,iptables,关闭SELINUX 1.安装必要的编译环境 ...

  8. FastDFS特性及问题思考

    FastDFS是国人开发的一款分布式文件系统,目前社区比较活跃.系统中存在三种节点:Client.Tracker.Storage,在底层存储上通过逻辑的分组概念,使得通过在同组内配置多个Storage ...

  9. 自己动手DIY macos下的绘图软件Pencil之原生菜单

    自从进入到Nodejs这个生态后,体验到了更多的可能性. Pencil是我从Linux时代就开始用的免费开源的原型/流程图软件,它之前版本是基于Firefox的XUL生态开发的,其作者从15年开始基于 ...

  10. Java反射+简单工厂模式总结

    除了 new 之外的创建对象的方法 通过 new 创建对象,会使得程序面向实现编程,先举个例子,某个果园里现在有两种水果,一种是苹果,一种是香蕉,有客户想采摘园子里的水果,要求用get()方法表示即可 ...