sticky非常非常非常好用怎么用看代码：

这里为什么没有设置高度呢，因为这个高度应该是浏览器高度，浏览器高度在时刻变化怎么办？

js处理：

此JS里面会有执行方法一步一步看

这个里面有JS方法

这个就是最关键的了，第一次拿到浏览器的高度$(window).height()
利用resize(function(){})函数每次变化都赋予新的高度。ok!

sticky就想胶水一样粘在你的页面上，不影响布局变化。可参照https://www.flying-lines.com里面的阅读页，大家仔细想想如果不用fixed恐怕很难解决（js除外）还有fixed对于这种布局，你自己试试就知道有多坑。

本人只提供纯正的干货，拒绝一切花里胡哨！亲朋好友走过路过不要错过，给点一个赞吧！

布局fixed和sticky的更多相关文章

  1. fixed和sticky

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...

  2. css-position之fixed vs sticky

    css-position之fixed  vs sticky fixed(固定定位) 元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的 sticky(粘性定位) 基于用户滚定动来进行定位的, ...

  3. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  4. HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  5. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  6. position属性sticky和fixed的区别比较

    position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...

  7. CSS 布局说——可能是最全的

    前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地. ...

  8. 【前端知识体系-CSS相关】CSS布局知识强化

    1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...

  9. 最全面的css布局

    1.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...

随机推荐

  1. Docker permission denied while trying to connect to the Docker daemon socket

    Problem jenkins执行docker打包的时候报错,说没有权限 docker build -t docker.ryan-miao.com/com.demo:f1aa23e --build-a ...

  2. Docker CE 镜像源站

    sudo apt-get update sudo apt-get -y install apt-transport-https ca-certificates curl software-proper ...

  3. gmock

    https://www.cnblogs.com/welkinwalker/archive/2011/11/29/2267225.html http://www.cnblogs.com/jycboy/p ...

  4. 【C++】C++中的流

    目录结构: contents structure [-] 1.IO类 IO对象无拷贝状态 条件状态 文件流 文件模式 string流 1.IO类 除了istream和ostream之外,标准库还定义了 ...

  5. 基于properties文件的Spring Boot多环境切换

    当我们使用properties文件作为Spring Boot的配置文件而不是yaml文件时,怎样实现多环境使用不同的配置信息呢?     在Spring Boot中,多环境配置的文件名需要满足appl ...

  6. mybatis中设置打印sql语句application.yml

    在application.yml配置文件中,找到数据源设置,添加: mybatis: configuration: log-impl:org.apache.ibatis.logging.stdout. ...

  7. Spring的两种代理方式：JDK动态代理和CGLIB动态代理

    代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对 ...

  8. 微信公众号平台上传文件返回错误代码:40005 invalid file type

    错误原因:文件类型(后缀名)不符合要求. 具体到笔者的情况是:在将 MultipartFile 类型转换为File 类型时,方法 File.createTempFile("filename& ...

  9. [Git] 将本地分支与远程分支关联

    . . . . . 在本地工程中添加Git,并将其与远程的空库关联起来,只需如下几步. 1. 创建空库 $ git init Initialized empty Git repository in D ...

  10. dubbo系列二：dubbo常用功能总结

    准备工作: (1)启动zookeeper作为dubbo的注册中心 (2)新建一个maven的生产者web工程dubbo-provider-web和一个maven的消费者web工程dubbo-consu ...