<!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. 几种序列化协议(protobuf,xstream,jackjson,jdk,hessian)相关数据对比

    测试结果 序列化数据对比 bytes字节数对比 具体的数字:   protobuf jackson xstream Serializable hessian2 hessian2压缩 hessian1 ...

  2. EF Migrations error： No connection string named 'MpDb' could be found in the application config file.

    solution:  update-database 命令查找连接字符是在当前启动项目中找的 确保启动项目中connectiongString配置存在.

  3. 【Linux】使用Google Authenticator 实现ssh登录双因素认证

    一般来说,使用ssh远程登录服务器,只需要输入账号和密码,显然这种方式不是很安全.为了安全着想,可以使用GoogleAuthenticator(谷歌身份验证器),以便在账号和密码之间再增加一个验证码, ...

  4. Linux 搭建git 自己拉取本地 git pull，其他地方的git仓库拉取代码

    Linux 下建立 Git 与 GitHub 的连接 Git 是一款开源的分布式版本控制系统,而 GitHub 是依托 Git 的代码托管平台. GitHub 利用 Git 极其强大的克隆和分支功能, ...

  5. python两个 list 获取交集，并集，差集的方法

    1. 获取两个list 的交集 #方法一: a=[2,3,4,5] b=[2,5,8] tmp = [val for val in a if val in b] print tmp #[2, 5] # ...

  6. BizTalk RosettaNet 配置导入与导出

    更多内容请查看:BizTalk动手实验系列目录                             BizTalk 开发系列 BizTalk 培训/项目开发/技术支持请联系:Email:cbcye ...

  7. Atitit orm的实现模式 data-mapper模式和active-record模式有什么区别

    Atitit orm的实现模式  data-mapper模式和active-record模式有什么区别 1.1. 这是来自Node.js路线有关混合两种ORM模式Active Record(活动记录模 ...

  8. make -j8以及linux下查看cpu的核数

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  9. Android Studio添加原生库并自动构建

    [时间:2017-09] [状态:Open] [关键词:Android,Android Studio,gradle,native,c,c++,cmake,原生开发,ndk-build] 0 引言 最近 ...

  10. s和t的特殊权限

    ls -l 通常会显示r w x权限,分别对应:读,写,执行权限. 但是有时我么会看到,s或t这类权限标识. eg: #include <unistd.h> #include <st ...