<!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. MFC更换窗口图标

      https://blog.csdn.net/deep_kang/article/details/72722692: MFC更换图标,图像默认为MFC,主要步骤有三步. 第一步 找到一张图片(坑点: ...

  2. c# System.Threading.Thread

    using System; using System.Threading; // Simple threading scenario: Start a static method running // ...

  3. 每天一个linux命令:df

    1.命令简介 df (disk free) 其功能显示每个文件所在的文件系统的信息,默认是显示所有文件系统. 2.用法 df [选项]... [文件]... 3.选项   4.示例 示例1:显示磁盘使 ...

  4. echarts参数详解--散点图

    参考地址:http://www.cnblogs.com/weizhen/p/5907617.html <!-- 1.首先需要下载包echarts.js,然后引入该包 --> <!DO ...

  5. Hierarchical softmax(分层softmax)简单描述.

    最近在做分布式模型实现时,使用到了这个函数. 可以说非常体验非常的好. 速度非常快,效果和softmax差不多. 我们知道softmax在求解的时候,它的时间复杂度和我们的词表总量V一样O(V),是性 ...

  6. 史上最简单的 SpringCloud 教程 | 终章

    https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...

  7. Eclipse Maven编译报不支持muti-catch

    最近几次使用maven编译,总是报一下的错误:source 1.6 中不支持 multi-catch 语句,(请使用 -source 7 或更高版本以启用 multi-catch 语句) 问题很清楚, ...

  8. 关于网站中引用COM组件的部署问题

    网站中引用了(PPT V14.0,即部署的服务器需要安装Office2010的)COM组件, 因此该功能对服务器有一定的环境要求: 1.安装Office2010,并激活. 2.配置: 1)开始-运行- ...

  9. Git进阶用法

    Git高阶用法 1. 基本概念 你的本地仓库由Git维护的三棵树组成.第一个是你的工作目录,它持有实际文件:第二个是缓存区(Index),它像个缓存区域,临时保存您的改动:最后是HEAD,指向你最近一 ...

  10. Linux常用的基础组件

    Linux服务器(新机器) yum install gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf git yum  ...