首先了解position: sticky
position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，
在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
用法简单，
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
效果见GIF图片
那么怎样不适用position:sticky来实现呢？
我们需要通过js和css来实现。
效果图见GIF
代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{margin:0;padding:0px;}
.center{width: 100%; text-align: center;font-size: 18px;font-weight: bold;}
header{height: 60px;line-height: 60px;background: powderblue;}
.sticky{ position:fixed;top:0px;}
#con{width:60%;height:1500px;background:#F6F6F6;margin:0 auto;}
p{
text-align: center;
}
</style>
<script type="text/javascript" src="https://xietao.fun/download/jquery-1.11.1.min.js"></script>
<!-- 我博客的js文件获取可能有点慢 -->
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>$("#top").height())
{$(".center").addClass("sticky");}
else
{$(".center").removeClass("sticky");}
})
})
</script>
</head>
<body>
<div id="top"></div>
<header class="center">头部头部头部头部头部头部</header>
<div id="con">
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
<br /><br /><br />
<p>我是谢涛</p>
</div>
</body>
</html>
来发评论吧～