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. Struct（二）

    struct2 权威指南 这一节通过一个详细的实例来讲解Struct2框架的应用 1 下载和安装Struts 2框架 (1) 登录http://struts.apache.org/download.c ...

  2. SNF快速开发平台MVC-审核流，审核完成后会给下一个审核人发邮件，下一个审核人可以不登录系统，在邮件里进行审核处理

    审核流设计和使用参考以下资料: 审核流设计 http://www.cnblogs.com/spring_wang/p/4874531.html 审核流实例 http://www.cnblogs.com ...

  3. JAVA（五）反射机制/Annotation

    成鹏致远 | lcw.cnblog.com |2014-02-04 反射机制 1.认识Class类 在正常情况下,必须知道一个类的完整路径之后才可以实例化对象,但是在 java中也允许通过一个对象来找 ...

  4. JVM内存管理及垃圾回收【转】

    很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...

  5. Vue.js常用指令：v-on

    一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...

  6. Java知多少（68）面向字符的输出流

    面向字符的输出流都是类 Writer 的子类,其类层次结构如图 10-5 所示. 图10-5 Writer的类层次结构图 表 10-3 列出了 Writer 的主要子类及说明. 表 10-3 Writ ...

  7. Top useful .Net extension methods

    Special extension methods were released in C# 3.0. Developers have continuously been looking for way ...

  8. Spark学习笔记——读写Hbase

    1.首先在Hbase中建立一张表,名字为student 参考 Hbase学习笔记——基本CRUD操作 一个cell的值,取决于Row,Column family,Column Qualifier和Ti ...

  9. Spark学习笔记——在远程机器中运行WordCount

    1.通过realy机器登录relay-shell ssh XXX@XXX 2.登录了跳板机之后,连接可以用的机器 XXXX.bj 3.在本地的idea生成好程序的jar包(word-count_2.1 ...

  10. json_decode 为空

    传递参数 wsk/addorder?goods=[{"gsn":802006,"number":1},{"gsn":103761," ...