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. 【Android】详解Android Activity

    目录结构: contents structure [+] 创建Activity 如何创建Activity 如何创建快捷图标 如何设置应用程序的名称.图标与Activity的名称.图标不相同 Activ ...

  2. oracle排序后的第一条记录

    该查寻语句没有经过任何的优化,因为oracle没有SQL的TOP关键字,但是有一个ROWNUM的列,因此,可以通过ROWNUM来进行查询.oracle的关于rownum的参考手册里面提到了    分析 ...

  3. Linux使用图形LVM(Logical Volume Manager)工具进行分区的动态扩展

  4. sql in not in 案例用 exists not exists 代替

    from AppStoke B WHERE B.Opencode=A.Code) in用extist代替 select distinct * from Stoke where Code not in ...

  5. 【C语言】两个指针（地址）相减

    两个指针相减,为两个指针之间间隔这两个指针类型的数目. 如:int *p,*q; p-q=(p地址-q地址)/sizeof(int) #include <stdio.h> int main ...

  6. dhcp server 移植记录

    这次移植 WIFI ,需要做成 AP 模式,所以,需要移植 dhcp 服务端 busybox 里面自带 udhcpd 选项. 打开buildroot , make busybox-menuconfig ...

  7. select理解

    https://www.cnblogs.com/skyfsm/p/7079458.html

  8. Java知多少（47）多重catch语句的使用

    某些情况,由单个代码段可能引起多个异常.处理这种情况,你可以定义两个或更多的catch子句,每个子句捕获一种类型的异常.当异常被引发时,每一个catch子句被依次检查,第一个匹配异常类型的子句执行.当 ...

  9. 阿里云中ssl配置（nginx安装https服务）

    1.配置 a.阿里云服务器 b.安装了nginx,php等 2.申请免费ssl证数 a. b. c.产看ssl证数 d.下载证数 e,这里我下载的是nginx(crt与key文件) f.服务器上配置 ...

  10. IntelliJ IDEA下spring boot项目打包

    Spring Boot自带Tomcat插件,可以直接编写启动类,开启Tomcat服务 springboot适合前后端分离,打成jar进行部署更合适 application.properties配置端口 ...