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. Easyui的DataGrid 清除所有勾选的行。

    $('#grid').datagrid('clearChecked')='none';//清除所有勾选的行.

  2. C# 给枚举类型增加一个备注特性

    /// <summary> /// 备注特性 /// </summary> public class RemarkAttribute : Attribute { /// < ...

  3. 物联网架构成长之路(11)-Redis缓存主从复制

    1. 说明 在我的物联网平台框架框架中,会用到Redis这个中间件.作为EMQ权限认证的缓存.https://www.cnblogs.com/think-in-java/p/5123884.html ...

  4. mac下使用apktool反编译

    Mac OS X: Download Mac wrapper script (Right click, Save Link As apktool) Download apktool-2 (find n ...

  5. linux grep 取出特定字符串并统计个数

    原始日志如下: $more text.log 2018-07-16 00:00:03 [DEBUG] request setInformation params:{"msg":&q ...

  6. org.apache.http.TruncatedChunkException: Truncated chunk ( expected size: 47956; actual size: 35656)

    在使用httpcomponents-client-4.2.1时,任务运行一段时间就抛出以下一场 下面是异常的堆栈信息: org.apache.http.TruncatedChunkException: ...

  7. Python_序列与映射的解包操作

    解包就是把序列或映射中每个元素单独提取出来,序列解包的一种简单用法就是把首个或前几个元素与后面几个元素分别提取出来,例如: first, seconde, *rest = sequence 如果seq ...

  8. Kubernetes集群部署之三ETCD集群部署

    kuberntes 系统使用 etcd 存储所有数据,本文档介绍部署一个三节点高可用 etcd 集群的步骤,这三个节点复用 kubernetes 集群机器k8s-master.k8s-node-1.k ...

  9. python通过input()函数输入的内容是什么类型

    说明: 通过input()函数,可以从标准输入读取内容,那么读到的内容是什么类型呢. 通过type()函数可以进行判断,另外,通过input()函数的官方解释,从标准输入读取一个字符串.所以,应该是字 ...

  10. mybatis xml 文件中like模糊查询

    1.直接传参法 直接传参法,就是将要查询的关键字keyword,在代码中拼接好要查询的格式,如%keyword%,然后直接作为参数传入mapper.xml的映射文件中. 2.CONCAT()函数 My ...