<!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知识点

    1.基本概念 1.1 四种类型 python中数有四种类型:整数.长整数.浮点数和复数. python中数有四种类型:整数.长整数.浮点数和复数. 整数, 如 1 长整数 是比较大的整数 浮点数 如 ...

  2. 用Wireshark对Android应用的网络流量进行抓包

    通过Wireshark.Charles.Burpsuite等工具分析网络流量的过程,又叫做抓包. 为何需要抓包 测试手机应用(如搜狗号码通.搜狗手机浏览器)的功能时,经常遇到与网络交互的场景,这时候我 ...

  3. os模块和os.path模块常用方法

    今天和大家分享python内置模块中的os模块和os.path模块. 1.什么是模块呢? 在计算机开发过程中,代码越写越多,也就越来越难以维护,所以为了可维护的代码,我们会把函数进行分组,放在不同的文 ...

  4. 「Elasticsearch」ES重建索引怎么才能做到数据无缝迁移呢？

    背景 众所周知,Elasticsearch是⼀个实时的分布式搜索引擎,为⽤户提供搜索服务.当我们决定存储某种数据,在创建索引的时候就需要将数据结构,即Mapping确定下来,于此同时索引的设定和很多固 ...

  5. 使用 SOS 对 Linux 中运行的 .NET Core 进行问题诊断

    目录 说明 准备一个方便的学习环境 2.x 配置内容 3.x 配置内容 工具介绍 lldb sos plugin 1. attach 到进程上进行调试 2. 分析core dump文件 SOS 案例分 ...

  6. springboot 不同环境读取不同配置

    1. 3个配置文件(更多环境可以建多个): application.properties  (公共配置文件) application-dev.properties  (开发环境) applicatio ...

  7. .NET 云原生架构师训练营（模块二 基础巩固 MongoDB 聚合）--学习笔记

    2.5.5 MongoDB -- 聚合 排序 索引类型 创建索引 排序 // 升序 db.getCollection('author').find({}).sort({"age": ...

  8. 【项目实践】SpringBoot三招组合拳，手把手教你打出优雅的后端接口

    以项目驱动学习,以实践检验真知 前言 一个后端接口大致分为四个部分组成:接口地址(url).接口请求方式(get.post等).请求数据(request).响应数据(response).如何构建这几个 ...

  9. Unraid修改docker镜像地址&默认启动

    起源 由于Unraid系统每次启动都会清空Docker的镜像地址配置,故需要默认配置镜像地址 方法 添加修改镜像脚本到开机文件中实现 先找一个镜像加速地址,我使用的是阿里云的容器镜像服务 形如 :ht ...

  10. [Skill] 记一次vue项目热更新失败案例

    病因 修改文件后无法更新界面,感觉留白,没有更新 解决过程 发现问题,第一步搜索别人是怎么解决的 搜索一阵后,发现大部分都是留言路径问题,基本都是组件文件夹大写导致 修改测试后发现问题依旧 然后仔细观 ...