布局fixed和sticky
sticky非常非常非常好用怎么用看代码:

这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办?
js处理:

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

这个里面有JS方法

这个就是最关键的了,第一次拿到浏览器的高度$(window).height()
利用resize(function(){})函数每次变化都赋予新的高度。ok!
sticky就想胶水一样粘在你的页面上,不影响布局变化。可参照https://www.flying-lines.com里面的阅读页,大家仔细想想如果不用fixed恐怕很难解决(js除外)还有fixed对于这种布局,你自己试试就知道有多坑。
本人只提供纯正的干货,拒绝一切花里胡哨!亲朋好友走过路过不要错过,给点一个赞吧!
布局fixed和sticky的更多相关文章
- fixed和sticky
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...
- css-position之fixed vs sticky
css-position之fixed vs sticky fixed(固定定位) 元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的 sticky(粘性定位) 基于用户滚定动来进行定位的, ...
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- position属性sticky和fixed的区别比较
position属性之fixed fixed总是以body为定位时的对象,总是根据浏览器窗口来进行元素的定位,通过left,right,top,bottom属性进行定位. <!DOCTYPE h ...
- CSS 布局说——可能是最全的
前言 现在,我们被称为前端工程师.然而,早年给我们的称呼却是页面仔.或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html. 其实,我们可能经常在聊组件化,咋地咋地. ...
- 【前端知识体系-CSS相关】CSS布局知识强化
1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...
- 最全面的css布局
1.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...
随机推荐
- 终于考完PMP
快到年底,上手了GO语言,搞定了广告后台,觉得年底前应该不忙; 我们的PM也报了PMP,可以一起报团学习,后来由于地理位置关系,我们项目组,三个人报了不同的班,也好,信息可以共享; 跟我们公司合作的培 ...
- PHP判断一个JSON对象是否含有某一个属性的方法
property_exists比如:var json={"code":400,"msg":"User Err"} var rest=prop ...
- HDU 1022.Train Problem I【栈的应用】【8月19】
Train Problem I Problem Description As the new term comes, the Ignatius Train Station is very busy n ...
- CentOS 6.5 x64相关安全,优化配置
一.安全 1.修改密码长度: [root@CentOS64 ~]# vi /etc/login.defs PASS_MAX_DAYS 99999 //用户的密密码最长使用天数 PASS_MIN_D ...
- POSTMAN模拟AJAX请求
环境: 1.测试工具:POSTMAN 2.调试框架:THINKPHP 3.开发工具:PHPSTORM 需求: 1.判断HTTP提交过来的请求是否为AJAX: 是:进行,修改.新增 否:进行查询,并返回 ...
- 开源一个CSV解析器(附设计过程 )
在ExcelReport支持csv的开发过程中,需要一个NETStandard的csv解析器.在nuget上找了几个试用,但都不太适合. 于是,便有了:AxinLib.IO.CSV. 先看看怎么用: ...
- 文档大师 在Win10 IE11下,文档集画面无法正常显示Word等Office文档的解决方法
在文档集界面中显示Word文档,是文档大师的一个核心功能. 最近在 Win10 升级到最新版后,发现 无法正常显示Office 文档的问题. 一开始以为是Word版本问题,从2007升级到2016,问 ...
- why-the-default-authentication-hadoop-is-unsecured ?
https://www.learningjournal.guru/article/hadoop/hadoop-security-using-kerberos/ https://stackoverflo ...
- Sublime text 3 格式化代码 插件
JsFormat: 重新打开sublime就能使用js格式化插件 使用方法: 1.快捷键:ctrl+alt+f 2.或者先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “For ...
- XML格式化工具
做接口开发的时候,往往接受参数或返回值是一个XML的字符串.如下图,不方便辨识 两种方法, 1.将它保存为xxx.xml,然后用浏览器打开.这种方法稍微有些麻烦. 2.使用 UltraEdit 工具