<!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. Android_编程开发规范

     Android编程开发规范         原文地址 http://www.jianshu.com/p/9b8aeca9b281 一.约定 Activity.onCreate(),Fragment. ...

  2. C# System.IO.StreamWriter

    实现一个 TextWriter,使其以一种特定的编码向流中写入字符. using System; using System.Collections.Generic; using System.Linq ...

  3. mysql分组用法

    --select num from 表 group by num --select num from 表 group by num,nid --特别的:group by 必须在where之后,orde ...

  4. 网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法

    在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...

  5. GPL、BSD、MIT、Mozilla、Apache、LGPL开源协议介绍

    BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为所欲为”,可以自由的使用,修改源代码,也可以将修改后的代码作为开源或者专有软件再发布. 但”为所欲为”的前提当你发布使 ...

  6. Python学习笔录

    参考:http://www.runoob.com/python3/python3-data-type.html 1. type和isinstance区别type(A()) == A, type()不会 ...

  7. C#获取中国天气网免费天气预报信息

    中国天气网接口地址:”http://wthrcdn.etouch.cn/WeatherApi?citykey=” + weatherCityCode(为城市code); 下面是转化过程中我们需要用到的 ...

  8. LeeCX - 开源后台管理系统简单介绍

    我们在github上开源了一个后台管理系统,使用了前端css框架并且简单的封装了一下,技术的将会不间断更新,详细可以点击原文链接.具体介绍如下: LeeCX 开源后台管理系统,前端基于bootstra ...

  9. SSL SSH

    http://www.91ri.org/13679.html https://www.linux.com/blog/how-install-ssl-certificate-linux-server h ...

  10. C#时间格式化显示AM/PM

    .ToString("MM/dd/yyyy hh:mm:ss:ffff tt")); //12小时制 .ToString("MM/dd/yyyy HH:mm:ss:fff ...