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. SQLite在.NET中自适应32位/64位系统

    如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...

  2. 使用docker搭建gitlab版本控制系统

    1. GitLab 简介 GitLab 是一款基于 git 的开源代码仓库系统   GitLab 与著名的 GitHub 最大的区别就是:  允许我们搭建自己的 git 代码私有仓库,非常方便   2 ...

  3. ionic 视图滚动到顶部

    问题描述 进入页面, 滚动到底部 点击一个连接, 当前视图内容更新了 内容滚动到了上次的位置导致底部的内容没显示 需要控制自动回滚到顶部 <ion-content delegate-handle ...

  4. Guava-Objects使用

    前言 Java中的Object提供了很多方法供所有的类使用,特别是toString.hashCode.equals.getClass等方法,在日常开发中作用很大,Guava中包含Objects类,其提 ...

  5. linux 命令之 dmidecode

    Dmidecode 这款软件同意你在 Linux 系统下获取有关硬件方面的信息.Dmidecode 遵循 SMBIOS/DMI 标准.其输出的信息包含 BIOS.系统.主板.处理器.内存.缓存等等. ...

  6. JS获取当前日期、比较日期大小

    //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = "-& ...

  7. TensorFlow精选Github开源项目

    转载于:http://www.matools.com/blog/1801988 TensorFlow源码 https://github.com/tensorflow/tensorflow 基于Tens ...

  8. mysql触发器详解 mysql触发器

    目录 21.1. CREATE TRIGGER语法 21.2. DROP TRIGGER语法 21.3. 使用触发程序 MySQL 5.1包含对触发程序的支持.触发程序是与表有关的命名数据库对象,当表 ...

  9. Atitit 最近资料文章列表r9 r8 月份 attilax总结

    Atitit 最近资料文章列表r9  r8 月份   attilax总结 atitit tag标签标示规范 attilax总结 v2 r922.docx 2017-09-28 02:04 阅读(27) ...

  10. Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决

    问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...