<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div class="" style="width: 600px;margin: auto">
<div class="top">
我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
</div>
<div class="title" style="width: 100%; height: 60px;background: #ccc; text-align: center; line-height: 60px;">
吸顶部分
</div>
<div>
我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
</div>
<div class="zhanwei"></div>
<div class="bottom" style="background-color: green;height: 60px;text-align: center;line-height: 60px;">
吸底部分
</div>
<div>
我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容 我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部内容
</div>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var titleTop = $('.title').offset().top;
let viewH = $(window).height();
let zhanweis = $(".zhanwei").offset().top; $(document).on('scroll', function() {
//滚动吸顶
var doc = $(document).scrollTop();
if(doc > titleTop) {
$('.title').css({
"position": "fixed",
"top": 0,
"width":"inherit"
})
} else {
$('.title').css("position","inherit")
} //滚动吸底
if(doc+viewH >= zhanweis) {
$(".bottom").css("position","inherit")
} else {
$(".bottom").css({
"position": "fixed",
"bottom": 0,
"width":"inherit"
})
}
})
})
</script>
</body> </html>

效果预览:

jQuery 页面滚动 吸顶 和 吸底的更多相关文章

  1. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  2. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  4. wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决

    参考:https://www.kancloud.cn/wangfupeng/wangeditor2/113980 当页面向下滚动到隐藏了菜单栏时,编辑器默认会fixed菜单栏,即让菜单栏保持『吸顶』状 ...

  5. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...

  6. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  7. jquery 页面滚动tab自动定位,tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  8. jquery页面滚动,菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  9. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

随机推荐

  1. 小白都能理解的Python多继承

    本文主要做科普用,在真实编程中不建议使用多重继承,或者少用多重继承,避免使代码难以理解. 方法解析顺序(MRO) 关于多重继承,比较重要的是它的方法解析顺序(可以理解为类的搜索顺序),即MRO.这个跟 ...

  2. windows服务器安装exe文件出错

    今天在安装exe文件的时候出现了错误,记录如下: 服务器环境为windows 2016数据中心标准英文版.要安装的软件为***.exe.按照在本地电脑上安装的方法,直接双击打开,然后错误出现如下图: ...

  3. python之代码重构

    在撸码过程中,总有很多代码需要重构,码一个问候用户的小例子,加深对代码重构的印象. 原始代码: 1 import json 2 3 filename = 'username.json' #定义文件名 ...

  4. OC 大数组分割成由小数组重新组合的新数组

    NSLog(@"++++%@",[self seprateBigArrBySize:3 BigArr:@[@"1",@"2",@" ...

  5. 【升级版】如何使用阿里云云解析API实现动态域名解析,搭建私有服务器【含可执行文件和源码】

    原文地址:http://www.yxxrui.cn/article/179.shtml 未经许可请勿转载,如有疑问,请联系作者:yxxrui@163.com 我遇到的问题:公司的网络没有固定的公网IP ...

  6. node.js 爬取图片

    /** * _ooOoo_ * o8888888o * 88" . "88 * (| -_- |) * O\ = /O * ____/`---'\____ * . ' \\| |/ ...

  7. Java 中泛型的实现原理

    泛型是 Java 开发中常用的技术,了解泛型的几种形式和实现泛型的基本原理,有助于写出更优质的代码.本文总结了 Java 泛型的三种形式以及泛型实现原理. 泛型 泛型的本质是对类型进行参数化,在代码逻 ...

  8. Flutter 基础组件:输入框和表单

    前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...

  9. java8 stream api流式编程

    java8自带常用的函数式接口 Predicate boolean test(T t) 传入一个参数返回boolean值 Consumer void accept(T t) 传入一个参数,无返回值 F ...

  10. Java开发手册之工程结构

    1.在线上生产环境,JVM 的 Xms 和 Xmx 设置一样大小的内存容量,避免在 GC 后调整堆大小带来的压力. 2.给 JVM 环境参数设置-XX:+HeapDumpOnOutOfMemoryEr ...