如何不使用position: sticky只用js和css来浮动定位?
标签搜索
侧边栏壁纸
  • 累计撰写 91 篇文章
  • 累计收到 7 条评论

如何不使用position: sticky只用js和css来浮动定位?

admin
2020-03-13 / 0 评论 / 166 阅读 / 正在检测是否收录...

首先了解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>

7

评论 (0)

取消