布局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.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...
随机推荐
- SQLite在.NET中自适应32位/64位系统
如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...
- 使用docker搭建gitlab版本控制系统
1. GitLab 简介 GitLab 是一款基于 git 的开源代码仓库系统 GitLab 与著名的 GitHub 最大的区别就是: 允许我们搭建自己的 git 代码私有仓库,非常方便 2 ...
- ionic 视图滚动到顶部
问题描述 进入页面, 滚动到底部 点击一个连接, 当前视图内容更新了 内容滚动到了上次的位置导致底部的内容没显示 需要控制自动回滚到顶部 <ion-content delegate-handle ...
- Guava-Objects使用
前言 Java中的Object提供了很多方法供所有的类使用,特别是toString.hashCode.equals.getClass等方法,在日常开发中作用很大,Guava中包含Objects类,其提 ...
- linux 命令之 dmidecode
Dmidecode 这款软件同意你在 Linux 系统下获取有关硬件方面的信息.Dmidecode 遵循 SMBIOS/DMI 标准.其输出的信息包含 BIOS.系统.主板.处理器.内存.缓存等等. ...
- JS获取当前日期、比较日期大小
//获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = "-& ...
- TensorFlow精选Github开源项目
转载于:http://www.matools.com/blog/1801988 TensorFlow源码 https://github.com/tensorflow/tensorflow 基于Tens ...
- mysql触发器详解 mysql触发器
目录 21.1. CREATE TRIGGER语法 21.2. DROP TRIGGER语法 21.3. 使用触发程序 MySQL 5.1包含对触发程序的支持.触发程序是与表有关的命名数据库对象,当表 ...
- Atitit 最近资料文章列表r9 r8 月份 attilax总结
Atitit 最近资料文章列表r9 r8 月份 attilax总结 atitit tag标签标示规范 attilax总结 v2 r922.docx 2017-09-28 02:04 阅读(27) ...
- Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决
问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...