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

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

作者: 涛哥     发布于「 技术分享 」 - 筱涛web之路

2020-3-12 分类: 技术分享 阅读(139)评论(0)
当前位置:首页 > 技术分享 > 正文

作者: 涛哥

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

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

分享到:
未经允许不得转载:

作者: 涛哥, 转载或复制请以 超链接形式 并注明出处 筱涛web之路
原文地址: 《如何不使用position: sticky只用js和css来浮动定位?》 发布于2020-3-12

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap