最新评论 - 第 75 页 - lizhenqiu blog

广西南宁市 2017-06-13 11:21

#0

阅读 53.9万

setTimeout,前端工程师必定会打交道的一个函数

js的实际经验，这些东西理解起来真的很吃力。
我还有是有一点点困惑，对于js 的事件队列与执行的队列有什么区别么？只有settimeout(0)可以放到队列尾部，改变实际实行顺序么？

// 结果Btn1 > Btn all > Btn2 ，预想是Btn all > Btn1 > Btn2
document.querySelector('#status_btns').onclick = function () {
    document.querySelector('#status_btns1').onclick();
    alert("Btn all");
    document.querySelector('#status_btns2').onclick();
};
 
document.querySelector('#status_btns1').onclick = function () {
    alert("Btn 1");
};
 
document.querySelector('#status_btns2').onclick = function () {
    alert("Btn 2");
};

查看文章跳到评论

广西南宁市 2017-06-13 11:20

#0

阅读 53.9万

与我给出的calculating 的例子是相同的. dom操作是异步的,el[0].style.backgroundColor = 'red'; 异步操作不会立马执行,而是生成一个事件插入到事件队列的最后面,接着执行for循环,然后到el[0].style.backgroundColor = 'green'; 这句,又插入一个事件到队列里面. 这时队列里面有2个dom渲染的事件挨在一起. 其实它们都是执行了的,只不过速度太快,你只能看到最后的一个渲染结果. 本质问题是代码的执行顺序变了, 是先执行了for , 然后 dom,dom. 解决办法就是让for 也异步插入一个事件到队列尾部. 就变成dom,for,dom. 这样就能实时反馈渲染了.

<div style="height:30px"></div><script>
var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
setTimeout(function(){for (var i=0; i< 2000000; i++)  {
	el[0].style.backgroundColor = 'green';
}},0);
</script>

查看文章跳到评论

广西南宁市 2017-06-13 10:38

#0

阅读 53.9万

setTimeout,前端工程师必定会打交道的一个函数

请问博主，下面的代码运行以后为什么不显示红色呢？
如何用单线程来解释？

<div style="height:30px"></div><script>var el = document.getElementsByTagName('div');
 
el[0].style.backgroundColor = 'red';
 
for (var i=0; i< 2000000; i++)  {
 
}
 
el[0].style.backgroundColor = 'green';</script>

广西南宁市2017-06-13 11:36:40

<div style="height:30px" onclick="rr();"></div><script>
function rr(){
var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
setTimeout(function(){for (var i=0; i< 2000000; i++)  {
    el[0].style.backgroundColor = 'green';
}},0);}
</script>

查看文章跳到评论

广西南宁市 2017-06-13 10:21

#0

阅读 2806.4万

常用html、demo代码

原生js，获取url ？号 #号后的对应键值对

<!DOCTYPE html>
<html>
<head>
	<title>获取url？#号后面键值对</title>
</head>
<body>
<script type="text/javascript">
	 getUrlParam=function (name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
            if (r != null) {
            	return unescape(r[2])
            }else{
            	return null;
            }
             
        }
    getUrlHash= function (name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.hash.substr(1).match(reg);
            if (r != null) {
            	return unescape(r[2])
            }else{
            	return null;
            }
            
        }  
    
    alert(getUrlParam("mod"));//xx要获取的键名
    alert(getUrlHash("xx"));
</script>
</body>
</html>

查看文章跳到评论

广西南宁市 2017-06-13 10:10

#0

阅读 2806.4万

常用html、demo代码

原生js尝试一个循环绑定和dataset方法输出index

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>原生js尝试一个循环绑定和dataset方法输出index</title>
		<style type="text/css">
			li {
				background-color: #ddd;
				padding: 8px;
				margin: 18px 0;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>第1个li</li>
			<li>第2个li</li>
			<li>第3个li</li>
			<li>第4个li</li>
			<li>第5个li</li>       
			<li>第6个li</li>       
			<li>第7个li</li>
		</ul>
		<script>
			var cc = document.getElementsByTagName('li');
			for(var i = 0; i < cc.length; i++) {
				cc[i].dataset.user = i;  //添加index
				cc[i].onclick = function(){  //循环绑定click
					alert("Index: "+this.dataset.user);
				}
			}
		</script>
	</body>

</html>

查看文章跳到评论

广西南宁市 2017-06-13 10:08

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

四种纯css进度条

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Progress</title>
		<style>
			*+.tg-progress {
				margin-top: 15px;
			}
			
			.tg-progress {
				box-sizing: border-box;
				height: 20px;
				margin-bottom: 15px;
				background: #f7f7f7;
				overflow: hidden;
				line-height: 20px;
				box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 2px 2px rgba(0, 0, 0, .07);
				border-radius: 4px;
			}
			
			.tg-progress-bar {
				width: 0;
				height: 100%;
				background: #009dd8;
				float: left;
				-webkit-transition: width .6s ease;
				transition: width .6s ease;
				font-size: 12px;
				color: #fff;
				text-align: center;
				background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
				background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
				box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1);
				text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
			}
			
			.tg-progress-striped .tg-progress-bar {
				background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				background-size: 30px 30px;
			}
			
			.tg-progress-striped.tg-active .tg-progress-bar {
				-webkit-animation: tg-progress-bar-stripes 2s linear infinite;
				animation: tg-progress-bar-stripes 2s linear infinite;
			}
			
			@keyframes tg-progress-bar-stripes {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: 30px 0;
				}
			}
			
			.tg-progress-danger .tg-progress-bar {
				background-color: #d32c46;
			}
		</style>
	</head>

	<body>
		<div class="tg-progress">
			<div class="tg-progress-bar" style="width: 40%;">40%</div>
		</div>
		<div class="tg-progress tg-progress-striped">
			<div class="tg-progress-bar" style="width: 65%;"></div>
		</div>
		<div class="tg-progress tg-progress-striped tg-active">
			<div class="tg-progress-bar" style="width: 85%;"></div>
		</div>
		<div class="tg-progress tg-progress-striped tg-active tg-progress-danger">
			<div class="tg-progress-bar" style="width: 85%;"></div>
		</div>
	</body>

</html>

查看文章跳到评论

广西南宁市 2017-06-13 10:06

#0

阅读 121.7万

上传base64图片到七牛云存储

<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
  var pic = picurl.substring(22);

            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str){
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }

                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str){ 
                var json = eval('(' + str + ')'); 
                return json; 
            }
  
  
  
  var url = "https://upload.qbox.me/putb64/-1";
  //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
		var data=xhr.responseText;
		//console.log(data);
		data=strToJson(data);
		//console.log(data);
		//data=strToJson(data.key);
		$('.watermark').hide();
		codeanddd('contentadddd','[img]http://out.img.pan.lizhenqiu.com/'+data.key+'[/img]');
		$('#myCanvasimgpuppmain').hide();
		submitinputtvllsscccc("上传成功！");

		//data=JSON.parse(data);
		
    }
  }
  xhr.open('POST', url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken "+token);
  xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
	//alert(event.originalEvent);
	//console.log(event.originalEvent);
	var e=event.originalEvent;
	//box.addEventListener("paste", function(e) {alert(event);
	if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
		var clipboardData = e.clipboardData,
			type = clipboardData.types;
		if (type.indexOf('Files') !== -1) {
			var item = clipboardData.items[0],
				reader = new FileReader();
			reader.onload = function(event) {
				var img = document.createElement('img');
				img.src = event.target.result;
					img.onload = function () {
						var canvas = document.getElementById("myCanvasimgpupp");
						var ctx = canvas.getContext('2d');
						ctx.drawImage(img, 0, 0, 55, 55);
					}
				$('#myCanvasimgpuppmain').show();
				$('#submitinputtvllss').text("正在上传..");
				//console.log(img.src);
				


						$.ajax( {
							url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
							type: "GET", //静态页用get方法，否则服务器会抛出405错误
							dataType: "json",
							//cache: false,
							//async: false,
							beforeSend: function(){
							 // Handle the beforeSend event
							},
							success: function(data){
								//data=JSON.parse(data);
								//alert(file);
								var upToken=data.upToken;
								var nnaame=data.nnaame;

									putb64(img.src,data.cccodejj,upToken)
					
							}
						});




				
				//document.body.appendChild(img);
			}
			if (item.kind === 'string' && clipboardData.items[1]) {
				item = clipboardData.items[1];
			}
			reader.readAsDataURL(item.getAsFile());
		}
	}
	//return false;
})






// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
});//, false

$('body').on('drop','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
  
			upperCase(file);
			$('#myCanvasimgpuppmain').show();
			$('#submitinputtvllss').text("正在上传..");

		$.ajax( {
			url: '/outblog.php', //这里是静态页的地址
			type: "GET", //静态页用get方法，否则服务器会抛出405错误
			dataType: "json",
			//cache: false,
			//async: false,
			beforeSend: function(){
			 // Handle the beforeSend event
			},
			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest,
					fd = new FormData;

					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						codeanddd('contentadddd','[img]http://out.img.pan.lizhenqiu.com/'+nnaame+'[/img]');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
					}
					// 
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}
		});
			
			

			return false;
			
			
			
	// file为前面获得的
	var url = window.URL.createObjectURL(file);
	var img = new Image;
	img.src = url;
	// 加到dom
	console.log(url);
  
		upperCase(file);
		$('#myCanvasimgpuppmain').show();
		
  
});//, false

</script>

广西南宁市2017-06-13 10:07:40

<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
  var pic = picurl.substring(22);

            /*通过base64编码字符流计算文件流大小函数*/
            function fileSize(str){
                var fileSize;
                if(str.indexOf('=')>0)
                {
                    var indexOf=str.indexOf('=');
                    str=str.substring(0,indexOf);//把末尾的’=‘号去掉
                }

                fileSize=parseInt(str.length-(str.length/8)*2);
                return fileSize;
            }
            /*把字符串转换成json*/
            function strToJson(str){ 
                var json = eval('(' + str + ')'); 
                return json; 
            }
  
  
  
  var url = "https://upload.qbox.me/putb64/-1";
  //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
		var data=xhr.responseText;
		//console.log(data);
		data=strToJson(data);
		//console.log(data);
		//data=strToJson(data.key);
		$('.watermark').hide();
		codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+data.key+'[/imgs]');
		$('#myCanvasimgpuppmain').hide();
		submitinputtvllsscccc("上传成功！");

		//data=JSON.parse(data);
		
    }
  }
  xhr.open('POST', url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("Authorization", "UpToken "+token);
  xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
	//alert(event.originalEvent);
	//console.log(event.originalEvent);
	var e=event.originalEvent;
	//box.addEventListener("paste", function(e) {alert(event);
	if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
		var clipboardData = e.clipboardData,
			type = clipboardData.types;
		if (type.indexOf('Files') !== -1) {
			var item = clipboardData.items[0],
				reader = new FileReader();
			reader.onload = function(event) {
				var img = document.createElement('img');
				img.src = event.target.result;
					img.onload = function () {
						var canvas = document.getElementById("myCanvasimgpupp");
						var ctx = canvas.getContext('2d');
						ctx.drawImage(img, 0, 0, 55, 55);
					}
				$('#myCanvasimgpuppmain').show();
				$('#submitinputtvllss').text("正在上传..");
				//console.log(img.src);
				


						$.ajax( {
							url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
							type: "GET", //静态页用get方法，否则服务器会抛出405错误
							dataType: "json",
							//cache: false,
							//async: false,
							beforeSend: function(){
							 // Handle the beforeSend event
							},
							success: function(data){
								//data=JSON.parse(data);
								//alert(file);
								var upToken=data.upToken;
								var nnaame=data.nnaame;

									putb64(img.src,data.cccodejj,upToken)
					
							}
						});




				
				//document.body.appendChild(img);
			}
			if (item.kind === 'string' && clipboardData.items[1]) {
				item = clipboardData.items[1];
			}
			reader.readAsDataURL(item.getAsFile());
		}
	}
	//return false;
})






// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('dragover', function (e) {
  e.preventDefault(); // 必须阻止默认事件
});//, false

$('body').on('drop','#contentadddd' , function(event){
	var e=event.originalEvent;
	//box.addEventListener('drop', function (e) {
  e.preventDefault(); // 阻止默认事件
  var file = e.dataTransfer.files[0]; //获取文件
  // code
  
			upperCase(file);
			$('#myCanvasimgpuppmain').show();
			$('#submitinputtvllss').text("正在上传..");

		$.ajax( {
			url: '/outblog.php', //这里是静态页的地址
			type: "GET", //静态页用get方法，否则服务器会抛出405错误
			dataType: "json",
			//cache: false,
			//async: false,
			beforeSend: function(){
			 // Handle the beforeSend event
			},
			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest,
					fd = new FormData;

					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+nnaame+'[/imgs]');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
					}
					// 
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}
		});
			
			

			return false;
			
			
			
	// file为前面获得的
	var url = window.URL.createObjectURL(file);
	var img = new Image;
	img.src = url;
	// 加到dom
	console.log(url);
  
		upperCase(file);
		$('#myCanvasimgpuppmain').show();
		
  
});//, false

</script>

查看文章跳到评论

广西南宁市 2017-06-13 10:04

#0

阅读 2806.4万

常用html、demo代码

不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路</title>
		<style type="text/css">
			.section{
				width: 100%;
				overflow: hidden;
				font-size: 0;  /*这里为0是因为子元素inline-block 之间可能有空格*/
				background-color: #eee;
			}
			.picture{
				width: 33.333%;
				vertical-align: middle;
				display: inline-block;  /*float 就是block布局 vertical-align不起作用*/
			}
			.picture img{
				width: 100%;
			}
			.text{
				width: 33.333%;
				vertical-align: middle; /*两个都要加*/
				display: inline-block;
				padding: 0 20px;
                box-sizing: border-box;
				background-color: #ccc;
			}
			.text h2{
				font-size: 20px;
				line-height: 48px;
				margin: 0;
			}
			.text p{
				font-size: 14px;
				line-height: 22px;
				margin: 0;  /*谷歌的-webkit-margin-after 和 -webkit-margin-before很友（tao）好（yan）呀*/
			}
		</style>
	</head>

	<body>
		<div class="section">
			<div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div>
			<div class="text">
				<h2>DIV CLASS=TEXT</h2>
				<p>这里是一个<strong>字数长度不确定</strong>的段落，到底有多少个字我也不知道，有几行我也不清楚，高度是随意的，但是我依然希望他能相对于图片垂直剧中，随时修改文字都可以。但是高度还是不要大于左右两个图片的高度吧，否则也没意义呀。ps：图片来源于网络</p>
			</div>
<!--左右都有-->
<div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div>
		</div>
	</body>

</html>

查看文章跳到评论

广西南宁市 2017-06-13 09:54

#0

阅读 2208.8万

程序员编程常用网页工具集[游戏]

CRUD是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。主要被用在描述软件系统中数据库或者持久层的基本操作功能。

查看文章跳到评论

广西南宁市 2017-06-13 09:40

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

查看文章跳到评论

广西南宁市 2017-06-13 09:37

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

查看文章跳到评论

广西南宁市 2017-06-13 09:27

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

查看文章跳到评论

广西南宁市 2017-06-13 09:24

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

查看文章跳到评论

广西南宁市 2017-06-13 09:22

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

广西南宁市2017-06-13 09:23:07

广西南宁市2017-06-14 09:11:23

广西南宁市2017-06-14 09:12:00

广西南宁市2017-06-14 10:05:11

查看文章跳到评论

广西南宁市 2017-06-12 17:54

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

广西南宁市2017-06-12 17:56:30

广西南宁市2017-06-13 09:20:13

广西南宁市2017-06-14 09:03:45

广西南宁市2017-06-14 09:04:18

广西南宁市2017-06-14 09:04:39

广西南宁市2017-06-14 09:08:00

#⁵

查看文章跳到评论

广西南宁市 2017-06-12 17:50

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

查看文章跳到评论

广西南宁市 2017-06-12 17:48

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

深入解析JavaScript中函数的Currying柯里化
 JS中的柯里化(currying)
问道js题目编写add函数然后 add(1)(2)(3)(4) 输出10 再考虑拓展性
 一道面试题引发的对javascript类型转换的思考

<script>function curry(fn) {
    var slice = [].slice;
    var len = fn.length;

    return function curried() {
        var args = slice.call(arguments);
        if (args.length >= len) {
            return fn.apply(null, args);
        }

        return function () {
            return curried.apply(null, args.concat(slice.call(arguments)));
        };
    };
}

var add = curry(function (a, b, c, d) {
    return a + b + c + d;
});

console.log(add(1)(2)(3)(4)); // 10
console.log(add(1, 2, 3)(4)); // 10
console.log(add(1)(2, 3)(4)); // 10</script>

查看文章跳到评论

广西南宁市 2017-06-12 17:07

#0

阅读 96.5万

奇妙的 CSS shapes(CSS图形)

使用 position:sticky 实现粘性布局

<div class="container">
    <div class="sticky-box">内容1</div>
    <div class="sticky-box">内容2</div>
    <div class="sticky-box">内容3</div>
    <div class="sticky-box">内容4</div>
</div>
<style>.container {
    background: #eee;
    width: 600px;
    height: 3000px;
    margin: 0 auto;
}

.sticky-box {
    position: -webkit-sticky;
    position: sticky;
    height: 60px;
    margin-bottom: 30px;
    background: #ff7300;
    top: 0px;
}

div {
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 60px;
}</style>

生效规则
position:sticky 的生效是有一定的限制的，总结如下：

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：

如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

查看文章跳到评论

广西南宁市 2017-06-12 16:52

#0

阅读 96.5万