<!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. grid - 通过网格线名称设置网格项目位置

    使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似. 1.引用网格线名称的时候不应该带方括号 <view class="grid"> <view ...

  2. MyBatis中使用实体中使用枚举，数据库中使用数值

    一.简介 本文主要讲MyBatis中使用实体中使用枚举,数据库中使用数值的解决方案.正常直接使用会报错,需要添加typeHandlers在mybatis-config.xml中. 二.解决方案 如下: ...

  3. 【打印】windows打印控件，Lodop.js介绍

    1.Lodop.js这插件很强大,目前仅支持windows系统 2.使用原生javascript编写 3.lodop支持客户端安装,c-lodop支持服务器端安装 4.无论客户端还是服务器端,都必须是 ...

  4. spring boot 搭建

    http://www.ityouknow.com/springboot/2018/06/12/spring-boo-java-simple.html 在http://start.spring.io/下 ...

  5. service_names配置不正确，导致dg创建失败

    service_names配置不正确,导致dg创建失败 伙伴发来消息,创建dg后,主备一直无法进行日志同步. 以下是查看过程 备库的alert日志: 2018-11-13T17:47:36.23129 ...

  6. How the heck does async/await work in Python 3.5

    https://snarky.ca/how-the-heck-does-async-await-work-in-python-3-5/

  7. 物联网架构成长之路(27)-Docker练习之Zookeeper安装

    0. 前言 准备了解一下消息队列MQ,对比了一些开源的中间件,最后选择Kafka作为以后用到的消息队列,消息队列的应用场景及Kafka与其他消息队列的优缺点这里就不细说了,具体的可以参考其他博客说明. ...

  8. Win2012R2 AD主域控登录密码忘记

    按照普遍的修改cmd.exe 的方法,还需要注意,DC主控制器修改密码需要在后面加上 /domain net user administrator 123 /domain

  9. Web API 异常处理

    Web Api的ExceptionFilter只能截获并处理Action执行过程中发生的异常,在Action执行过程之外如果出现异常,ExceptionFilter是无能为力的. 这些异常包括: 1. ...

  10. 字节输入流：io包中的InputStream为所有字节输入流的父类。

    字节输入流:io包中的InputStream为所有字节输入流的父类. Int read();读入一个字节(每次一个): 可先使用new  byte[]=数组,调用read(byte[] b) read ...