大佬教程收集整理的这篇文章主要介绍了position: sticky，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>STICKY</title>
<!--<script src="modernizr-dev.js"></script>-->
<link href="index.css" rel="stylesheet" />
</head>
<body>
<header>TEST</header>
<div class="sticky-wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li id="test"><div>test</div></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</div>
<script>
function featureTest( property,value,noPrefixes ) {
// Thanks Modernizr! https://github.com/phistuck/Modernizr/commit/3fb7217f5f8274e2f11fe6cfeda7cfaf9948a1f5
var prop = property + ':',el = document.createElement( 'test' ),mStyle = el.style;
if( !noPrefixes ) {
mStyle.cssText = prop + [ '-webkit-','-moz-','-ms-','-o-','' ].join( value + ';' + prop ) + value + ';';
} else {
mStyle.cssText = prop + value;
}
return mStyle[ property ].indexOf( value ) !== -1;
}
'use Strict';
onload = function() {
var stickySupported = featureTest('position','sticky');
document.querySELEctor('html').classList.add(stickySupported ? 'csssticky' : 'no-csssticky');
if (!stickySupported) {
var elem = document.getElementById('test');
elem.style.height = elem.height = getComputedStyle(elem).height;
elem.children[0].style.right = parseFloat(getComputedStyle(elem.parentElement.parentElement).width) - parseFloat(getComputedStyle(elem).width) + 'px';
elem.parentElement.addEventListener('scroll',function() {
console.log(this.scrollTop);
if (this.scrollTop > elem.offsetTop) {
elem.classList.add('sticky');
} else {
elem.classList.remove('sticky');
}
});
}
}
</script>
</body>
</html>
以上是大佬教程为你收集整理的position: sticky全部内容，希望文章能够帮你解决position: sticky所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。