[JavaScript] 元素粘滞定位

最新推荐文章于 2021-10-31 16:35:28 发布
最新推荐文章于 2021-10-31 16:35:28 发布
阅读量102 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/shimily/articles/3749661.html
版权

曾经webkit也支持过position:sticky，但后来的版本中取消了对其的支持。确实用

@media(scroll-top)来实现会灵活的多。但目前的浏览器既不支持position:sticky也

不支持@media(scroll-top)。瞬间觉得回到了解放前，只能用JS去实现。

　　position:sticky的作用是普通情况下对元素正常定位，但元素企图滚动到屏幕外

时会以类似fixed的定位方式留在屏幕的边缘。但是sticky的这个行为太奇怪了，而且

功能的适用性太差。实际上要是@media(scroll-top)可以支持的话就可以实现，

而且@media比其它固定的属性要灵活的多，只是目前暂时没有实现。

 

<!DOCTYPE html>
<style>
body {margin:0px;height:2000px;}
a {
  position:absolute;
  top:400px;right:40px;
  width:50px;height:50px;
  text-align:center;
  text-decoration:none;
  font:14px/50px Simsun;
  background:#EEE;
  border:1px solid #CCC;
  color:#000;
  opacity:0.5;
}
a:hover {opacity:1;}
</style>
<a id="init" href="#">顶</a>
<script>
onscroll=function(){
  var v=document.documentElement.scrollTop||document.body.scrollTop;
  if(v>360)
    init.style.position="fixed",
    init.style.top="40px";
  else 
    init.style.position="absolute",
    init.style.top="400px";
}
</script>

 

 

 测试代码一般懒得写，浏览器对有id的元素会自动在全局生成一个引用，虽然是非标准的，但目前全浏览器支持（早起的Firefox版本不支持而已）。

 

转载于:https://www.cnblogs.com/shimily/articles/3749661.html

weixin_30872499
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
粘性定位 position: sticky
hdz52013的博客
08-02 769
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initi...
within:其他元素内的固定粘滞元素
05-15
在JavaScript的世界里，"其他元素内的固定粘滞元素"是一个关于网页布局和用户界面交互的概念。固定粘滞元素，也称为“sticky positioning”，是CSS3引入的一种定位方式，它允许元素在页面滚动到特定位置时固定在视口...
利用JS实现粘性定位
lbwnbdedede的博客
10-31 1769
文章目录前言一、CSS布局二、JS实现1.获取元素2.获取参数3.事件总结 前言 效果如下图（橙色小方块） 一、CSS布局 CSS部分的内容很简单，不必详谈。 <style> * { margin: 0; padding: 0; } .w { /* position: absolute; */ width: 80%;
07 粘滞定位
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-02 136
<!DOCTYPE html> <head> <meta charset="UTF-8"> <!-- 去除浏览器默认样式 --> <link rel="stylesheet" href="../reset_style/reset.css"> <title>20胡学好</title> <style> body{ height: 3000
js实现sticky粘性定位
weixin_45162984的博客
10-20 930
var dom = document.querySelector('.count_money'), domTop = dom.offsetTop; window.addEventListener('scroll',scrollFunc) function scrollFunc() { // 定位底部 if(window.pageYOffset < domTop - window.innerHeight){ ...
CSS / JS 实现粘性头部（滚动到一定位置后固定）
小小前端
05-08 1万+
要实现的效果：  当页面滚动到一定位置时，.nav position的值变为 fixed css 实现 .nav { position: sticky; top: 0px; }   粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。   在 viewport 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将...
粘滞头的jQuery插件-JavaScript开发
05-26
粘性标头用于制作粘性标头的简单jQuery插件。 .../ script> Sticky Header简单的jQuery插件用于制作粘性标头。 ...调用插件$（document）.ready（function（）{$（'。example'）。stickMe（）;}）插件类
新建粘滞模型.zip
09-07
在给定的“新建粘滞模型.zip”压缩包文件中，包含了两个主要的文件：Chen_vsm1.m 和 Chen_s_vsm.slxc。这些文件是用于模拟阀门粘滞特性的数学模型，可以帮助用户理解并分析阀门在实际操作中的动态性能。 首先，Chen...
sticky:粘滞表标题和左列
05-22
一个小JavaScript文件，它实现了粘滞表标题和左粘滞列，使您可以在EXCEL-Spreadsheets中找到冻结窗格功能。 这是通过使用表标题，所有左列和左上角的副本作为左列的标题来实现的。 然后，根据元素和滚动方向，...
Linux下的粘滞位详细介绍
09-15
在Linux操作系统中，粘滞位（Sticky Bit）是一个特殊权限位，主要用于控制对特定目录的文件删除操作，尤其在多用户环境中，确保用户只能删除自己创建的文件，而不能随意删除他人文件。这个功能最初是为了保护 `/tmp`...
详解CSS粘性定位 sticky
12-11
前言： position:sticky是css定位新增属性； 可以说是static（没有定位） 和 固定定位fixed 的结合； 它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)； position:sticky这时的效果相当于fixed定位，固定到适当位置 讲 sticky 定位之前，我先说一下position 的其他定位， absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的 位置通过"left", "top", "right" 以及 "
粘性定位position:sticky的应用
前端361
10-17 1156
使用场景：模块在滚动到距离顶部的位置一定时，固定不动 原理：position:fixed和position:relative的结合 使用方法： { position: -webkit-sticky; position: sticky; top: 0; }   优点：较少代码实现弹性固定场景，比如导航栏 缺点：兼容性不好  CANIUSE 下的截图：  ...
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 391
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
块元素居中方式
gklcsdn的博客
12-10 787
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
彻底理解粘性定位（position：sticky）
weixin_57585624的博客
09-05 1万+
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如： .div{ position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下 一、应用场景： 1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上 2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.
css粘性定位position：sticky问题采坑
热门推荐
小熊的博客
07-14 14万+
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...
粘性定位的使用
liluo_1227的博客
07-14 1498
背景：项目中需要把按钮固定在可视区域，所以采取粘性定位，如果内容较少就在内容底部，当内容过多按钮固定在屏幕下方，居中显示 之前想过用固定定位但是发现数据少的时候按钮在下面很怪，而且当我父盒子宽度改变时按钮并不会变化，原本的居中就歪了，后面发现粘性定位加盒子可以完美解决问题 方法：封装了一个粘性定位组件，是一个盒子，里面可以放需要定位的按钮或者文字，然后给盒子粘性定位，这样的好处是盒子宽度直接100%，内容设置居中，不管父元素宽度怎么变化都不影响 组件（组件是公司大佬写好的）： <templa
粘性定位元素position:sticky
MFWSCQ的博客
04-04 981
这里我们不讨论position其他的：static，fixed，relative和absolute几个属性了，之讨论sticky的特性 sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和containing block(最近块级祖先nearest block-level ancestor)，包括table-related...
不使用JavaScript的粘性定位（感谢CSS位置：粘性）
Web design 教程小屋
07-09 751
用户滚动到某个点时粘贴元素是现代Web设计中的常见模式。 您会看到它应用于顶部导航，侧边栏，共享链接或广告块； 在用户滚动时在视口内保持可见性。 从历史上看，我们需要JavaScript才能做到这一点。 但是，粘性行为已成为新的标准（CSS position: sticky ），使我们能够使用纯CSS达到效果。 让我们看看它是如何工作的！ 粘性位置 sticky是position属性的...
html table 表头粘滞定位
最新发布
06-12
在 HTML 的 table 中，可以通过 CSS 实现表头的粘滞定位。具体实现步骤如下： 1. 将表头部分放在一个单独的 \<thead> 元素中，将表格内容放在 \<tbody> 元素中。 ```html 表头1 表头2 表头3 内容...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值