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. shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

    shouldComponentUpdate询问组件是否需要更新的一个钩子函数,判断数据是否需要重新渲染,返回一个布尔值.默认的返回值是true,需要重新render().若如果返回值是false则不触 ...

  2. 如何卸载EXCEL中的插件？

    1.问题:每一次启动,excel都会弹出一个提示框,是因为将treeplan给删除了.找不到. 2.解决办法: 1)在加载项界面,点击转到.就进入自己加载的工具界面 2)将相应项前面的勾取消--但某插 ...

  3. golang 使用pprof和go-torch做性能分析

    软件开发过程中,项目上线并不是终点.上线后,还要对程序的取样分析运行情况,并重构现有的功能,让程序执行更高效更稳写. golang的工具包内自带pprof功能,使找出程序中占内存和CPU较多的部分功能 ...

  4. System.IO.File.WriteAllText("log.txt", "dddd");

    System.IO.File.WriteAllText("log.txt", "dddd");

  5. 关于现在互联网是否还有机会类的价值文章，为什么有人掉进互联网创业的坑里，可能因为ta不懂这些

     --也是带着问题看这篇文章的,面临BAT时代的互联网创业者如何带领自己的公司存活成长,本文有些理念很有意思,前辈企业家是抓住机会干企业,现代化是发现问题最先解决干企业,最难的.同仁意愿不强的大问题才 ...

  6. css3 box-shadow 使用方法详解

    其用法为:  代码如下 复制代码 box-shadow: x-offset y-offset blur spread color inset; 上述六个参数含义依次是水平方向的偏移(正值向右偏移,负值 ...

  7. Linux nohup用法

    在应用Unix/Linux时,我们一般想让某个程序在后台运行,于是我们将常会用 & 在程序结尾来让程序自动运行. 比如我们要运行mysql在后台: /usr/local/mysql/bin/m ...

  8. Linux好用的工具命令 - rz/sz

    Linux系统中将本地的文件上传到服务器或者从服务器上下载文件到本地可以通过安装lrzsz工具来简单便利的完成. >>RZ :将本地的文件上传到服务器 >>SZ:从服务器上下载 ...

  9. maven私服不能重复部署解决

    1.报错 Return code is: 400, ReasonPhrase: Repository does not allow updating assets: maven-releases. 2 ...

  10. JQuery DataTables Selected Row

    获取单行选中的值 $('#MonitoringTypeTable tbody').on('click', 'tr', function () { if ($(this).hasClass('selec ...