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. VMWare 下安装 MSDN版 MS-DOS 6.22

    最近有些怀旧,刚从孔夫子旧书网淘回一本<Borland 传奇>,里面讲到了很多DOS时代的经典软件,特别想尝试一下~比如:Turbo Pascal.SideKick.Borland C/C ...

  2. shell编程学习笔记（十）：Shell中的for循环

    shell编程中可以实现for循环遍历 先来写一个最简单的吧,循环输出从1到10,脚本内容为: #! /bin/sh for i in {1..10} do echo $i done 上面的代码从1到 ...

  3. 安装rcssmin方法

    #安装rcssmin方法'''pip install wheelpip install rcssmin --install-option="--without-c-extensions&qu ...

  4. Xcode10.1 import头文件无法索引

    如下路径,修改设置 Xcode --> File --> Workspace Settings --> Build System --> Legacy Build System

  5. MySQL导出TSV格式文件

    可以使用mysqldump, 也可以使用mysql -e 使用mysqldump 因为要使用到 -T / --tab 参数, 需要先查看mysql设置的secure_file_priv mysql&g ...

  6. 爬虫破解js加密（一） 有道词典js加密参数 sign破解

    在爬虫过程中,经常给服务器造成压力(比如耗尽CPU,内存,带宽等),为了减少不必要的访问(比如爬虫),网页开发者就发明了反爬虫技术. 常见的反爬虫技术有封ip,user_agent,字体库,js加密, ...

  7. Sublime插件Emmet的安装及Tab补全代码

    Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度,只需按住Tab键即可把一个简写展开成HTML和CSS的代码 ...

  8. 当使用 SelfHost 的 OWIN 承载 SignalR 时，重启 OWIN 后，SignalR 不能正常工作

    需要在初始化时,重新对 Resolver 赋值一个新的实例: public class Startup { public void Configuration(IAppBuilder app) { v ...

  9. ssh连接服务器失败解决记录

    故障:db2inst1用户无法通过ssh连接数据库服务器. 但是root用户可以连接,连接后su – db2inst1用户报错: su: cannot set user id: Resource te ...

  10. [Java并发编程（三）] Java volatile 关键字介绍

    [Java并发编程(三)] Java volatile 关键字介绍 摘要 Java volatile 关键字是用来标记 Java 变量,并表示变量 "存储于主内存中" .更准确的说 ...