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. Visual Studio开发工具升级注意事项

    由于前几年公司开发的系统使用的开发工具版本不统一,现在后期维护升级在开发人员的电脑上要同时安装好几个不同的开发工具, 比如VS2008,VS2010,VS2012,甚至还有用VS2003开发的接口之类 ...

  2. [ci]jenkins-slave的添加(vm模式,通过ssh和jnlp)

    jenkins-slave的添加-在vm上通过jnlp方式 参考:http://www.cnblogs.com/sparkdev/p/7102622.html 下载 slave.jar和slave-a ...

  3. Diocp截图

    跑了个数据库的查询和插入,删除.     Http SVR DEMO http://123.232.98.202:8081/

  4. 在Centos 6 64bit 上安装 Hyperic HQ 5.8.2.1 中文版

    原文:https://my.oschina.net/hyperichq/blog/306791 环境描述: [test@tester ~]$ cat /etc/issue CentOS release ...

  5. sklearn linear_model,svm,tree,naive bayes,ensemble

    sklearn linear_model,svm,tree,naive bayes,ensemble by iris dataset .caret, .dropup > .btn > .c ...

  6. [转]在Windows上安装RabbitMQ

    原文链接    翻译:xiezc 下载服务器 描述 下载   Windows系统安装程序(来自Bintray) 的RabbitMQ的服务器-3.7.4.exe (签名) Windows系统安装程序(来 ...

  7. hdoj：2047

    #include <iostream> using namespace std; ] = { , , }; // O,E 组成长度为n的数量 long long fib(int n) { ...

  8. 【Mac brew】代理安装brew insall

    http_proxy=dev-proxy.**.**:8080 https_proxy=dev-proxy.**.**:8080  brew install npm

  9. [PyData] 01 - Web Crawler

    前言 一.总体策略 一些常见抓取数据的例子.三步走: 抓取数据并存储 <---- 数据处理 数据展示 二.学习资源 首先,通过Beautiful Soup抓取数据 from http://www ...

  10. SpringMVC中 -- @RequestMapping的作用及用法

    一.@RequestMapping 简介 在Spring MVC 中使用 @RequestMapping 来映射请求,也就是通过它来指定控制器可以处理哪些URL请求,相当于Servlet中在web.x ...