Html吸顶效果

一、HTML

HTML中需要给div一个id

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div id="head"></div>

</body>

</html>

二、CSS

<style>

  #head {

      background-color: #989898;

      width: 100%;

      height: 100px;

      margin-top: 100px;

  }

  #head[data-fixed="fixed"]{

      position: fixed;

      top:;

      left:;

      margin:;

   }

 </style>

三、JS

1、面向过程

<script>

    var obj = document.getElementById("head");

    var ot = obj.offsetTop;

    document.onscroll = function () {

    var st = document.body.scrollTop || document.documentElement.scrollTop;

    obj.setAttribute("data-fixed",st >= ot?"fixed":"")}

</script>

2、面向对象

1）封装方法

/*

 * 封装吸顶函数，需结合css实现。

 * 也可以直接用js改变样式，可以自行修改。

 */

    function ceiling(obj) {

        var ot = obj.offsetTop;

        document.onscroll = function () {

        var st = document.body.scrollTop || document.documentElement.scrollTop;

        obj.setAttribute("data-fixed",st >= ot?"fixed":"");

        }

    }

2）调用方法

<script src="ceiling.js"></script>

<script>

    window.onload = function () {

         /*获取对象*/

        var wrap = document.getElementById("head");

        ceiling(wrap) /*调用吸顶函数  */

    };

</script>

Html吸顶效果的更多相关文章

  1. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  2. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  3. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  4. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  6. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  7. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  8. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  9. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

随机推荐

  1. 如何在WCF中用TcpTrace工具查看发送和接收的SOAP消息

    WCF对消息加密(只对消息加密,不考虑Authorize)其实很简单,只要在server和client端的binding加入security mode为Message(还有Transport, Tra ...

  2. opencv-android笔记1：android studio 2.3 + opencv-android-sdk 实现 camera预览

    Android studio环境配置不再赘述,可以参照我的其他博客. Android应用程序开发环境搭建:http://blog.csdn.net/ja33son/article/details/61 ...

  3. Photodesk for Mac（Instagram 桌面客户端）破解版安装

    1.软件简介    PhotoDesk - for Instagram 是 macOS 系统上一款 Instagram 客户端,可以让大家在 Mac 上观看朋友的新照片.或是最近热门的作品,也可以 f ...

  4. BigDecimal提供了8种舍入方式

    BigDecimal提供了8种舍入方式 1.ROUND_UP:舍入远离零的舍入模式.在丢弃非零部分之前始终增加数字(始终对非零舍弃部分前面的数字加1).注意,此舍入模式始终不会减少计算值的大小. 2. ...

  5. Java知多少（25）再谈Java包

    在Java中,为了组织代码的方便,可以将功能相似的类放到一个文件夹内,这个文件夹,就叫做包. 包不但可以包含类,还可以包含接口和其他的包. 目录以"\"来表示层级关系,例如 E:\ ...

  6. 关于指针*前后const代表的意思——记住一个口诀“左内右本”

    记住一个口诀“左内右本”:const出现在*的左边,则说明指针所指向的内容是常量const出现在*的右边,则说明指针本身是常量如果*左右两边都出现const,那么说明指针本事是常量,它所指向的内容也是 ...

  7. 第三百九十八节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置

    第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...

  8. Mac mysql 修改密码

    如果你知道密码: mysqladmin -u root -p password 新密码 MYSQL数据库密码忘记: 1. 在系统偏好 中,中止MYSQL服务.: 2. cd/usr/local/mys ...

  9. 浅析C#中的结构体和类

    类和结构是 .NET Framework 中的常规类型系统的两种基本构造. 两者在本质上都属于数据结构.封装着一组总体作为一个逻辑单位的数据和行为. 数据和行为是该类或结构的"成员" ...

  10. 关闭2010中 word每次都提示：所做更改会影响共用模板 Normal.dotm

    '您正试图运行的函数包含有宏或需要宏语言支持的内容.而在安装此软件时, 您(或您的管理员)选择了不安装宏或宏的控件的支持功能.' 每次关闭word都要出现这个该死的提示,头痛了半天. 谢谢各位! 我终 ...