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.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...
随机推荐
-
CMake的一些使用
1. 使用QT加载CMake工程 打开QT,"文件"->"打开文件或项目"->选中CMakeLists.txt文件,出现对话框,单击下一步,点击&q ...
-
IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
-
openSUSE 配置静态上网
openSUSE静态固定IP设置方法 openSUSE号称最华丽的Linux,只是中文资料实在太少,这里提供在VMmware Workstation 7.12中安装openSUSE 11.3设置静态固 ...
-
EL表达式的操作符
表9.1 EL表达式的操作符 操作符 功能和作用 . 访问一个bean属性或者Map entry [] 访问一个数组或者链表元素 () 对子表达式分组,用来改变赋值顺序 ? : 条件语句,比如:条件? ...
-
头文件的宏定义#ifndef测试
一.入题 在头文件的书写中,都加入了如下内容: #ifndef __头文件名_H #define __头文件名_H #endif 曾经在书中看到的解释是“防止重复定义”,今天突然想到为什么是这样的解释 ...
-
Django Errors Archive
记录使用 Django 开发中遇到的问题,备用 1. 版本要选好,最好安装上 pip,可以省很多麻烦 2. 如果使用 Postgresql,选 8.1 之后的版本,免去 Retruning 之类的错误 ...
-
201521123082 《Java程序设计》第5周学习总结
201521123082 <Java程序设计>第5周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规 ...
-
如何在一个项目中同时包含mvc建站、webapi接口
项目做得多了..就会发现有些小项目不想建太多的项目..现在思明在这里和大家分享一下如果再一个项目中同时包含mvc建站以及实现webapi接口 1.新建项目 aps.net web 应用程序 2 新建模 ...
-
python - Random常用方法记录
import random # range [a,b) 不包含b # 获取随机整数 # randrange [a,b) 不包含b a = random.randrange(0, 101, 5) # E ...
-
windows下git的使用方法(码云)
这表文章主要是用了可视化操作: 使用命令行操作:https://www.cnblogs.com/mswyf/p/9370238.html 一.安装Git Bash 为了在windows下使用Git,我 ...