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. VUE温习：nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

  2. 手把手教你制作微信小程序，开源、免费、快速搞定

    最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...

  3. 遇到一个git branch很奇怪的问题

    最近,同事做了一个自动化的打包平台,但我发现里面的分支竟然有重复的,还有一些已经删除的branch. 比如,我已经删除了一个 test分支,在工程 game 目录下(已输入 git pull),输入: ...

  4. Android_Printservice_API_部分翻译

    文件夹 * package android.printservice * public abstract class PrintService * public abstract class Prin ...

  5. 分布式架构探索 - 2. WebService RPC框架之Apache CXF

    Apache CXF是一个开源的WebService RPC框架. 例子: 1. 新建一个maven web项目, 添加pom 如下: <?xml version="1.0" ...

  6. react diff 原理

    (1) 把树形结构按照层级分解,只比较同级元素.(2) 列表结构的每个单元添加唯一的 key 属性,方便比较.(3) React 只会匹配相同 class 的 component(这里面的 class ...

  7. [转] 阿里研究员谷朴：API 设计最佳实践的思考

    API是软件系统的核心,而软件系统的复杂度Complexity是大规模软件系统能否成功最重要的因素.但复杂度Complexity并非某一个单独的问题能完全败坏的,而是在系统设计尤其是API设计层面很多 ...

  8. CoreGraphics之CGContextSaveGState与UIGraphicsPushContext

    转至:https://www.jianshu.com/p/be38212c0f79 CoreGraphics与UIKit 这边从iOS绘图教程 提取一些重要的内容. Core Graphics Fra ...

  9. GPL、BSD、MIT、Mozilla、Apache、LGPL开源协议介绍

    BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为所欲为”,可以自由的使用,修改源代码,也可以将修改后的代码作为开源或者专有软件再发布. 但”为所欲为”的前提当你发布使 ...

  10. Atitit 乌合之众读后感attilax总结 与读后感结构规范总结

    Atitit 乌合之众读后感attilax总结 与读后感结构规范总结 1. 背景概览与鸟瞰overview 1 1.1. 社会背景 与 历史事件背景  与历史时间背景 1 1.2. 书籍简绍 2 1. ...