用CSS实现跟随滚动条漂浮层

最新推荐文章于 2024-05-15 13:47:23 发布

diaotuan2025

最新推荐文章于 2024-05-15 13:47:23 发布

阅读量654

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kally/archive/2011/07/24/2115401.html

　　无意中路过火狐社区发现他们的跟随滚动条漂浮层比自己之前做的要流畅、

自然，好奇下用Firebug对其构造进行分析：

1、刚开始觉得和自己写的原理一样用以下控制浮动层显示位置　

Top:0;
position: absolute;

2、和自己做的对比下发现，火狐社区Top:0始终没有改变过，而我做的Top在随

滚动条变化改变数值。

3、将其CSS和Html代码都贴出，有没JS控制，那就CSS发挥神奇功效，从下一

层层删除没用的CSS语句，一直到删除header样式，漂浮层不再随滚动条滚动，

其中有以下三行代码决定漂浮层跟随

padding: 10px 0 0;
position: fixed;
width: 300px;

　　火狐社区地址：http://mozilla.com.cn/foxletter/9-201107-firefox-express/

　　整理后下载地址：http://files.cnblogs.com/kally/%E7%94%A8CSS%E5%AE%9E%E7%8E%B0%E8%B7%9F%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%BC%82%E6%B5%AE%E5%B1%82.rar

转载于:https://www.cnblogs.com/kally/archive/2011/07/24/2115401.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaotuan2025

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue第 33 篇，Vue飘窗效果，Vue飘窗组件实现详解（css飘窗效果，跟随页面滚动）

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）

02-27

2712

⭐在网站设计中，飘窗广告是一种常见的营销策略，用于吸引用户注意力。而在 Vue 中实现飘窗效果，不仅能提升用户体验，还能增加网页的点击率。这里将详细介绍如何使用 Vue创建一个可定制的飘窗组件。

用CSS实现跟随滚动条漂浮层代码

08-13

用CSS实现跟随滚动条漂浮层代码，纯CSS实现，鼠标跟随漂浮层。可自己有定制漂浮位置。

参与评论您还未登录，请先登录后发表或查看评论

滚动条如何设置样式和滚动条悬浮显示与隐藏

热门推荐

weixin_44784401的博客

04-13

2万+

滚动条如何设置样式和滚动条悬浮显示与隐藏

滚动条样式-鼠标悬浮才展示滚动条

qq_42552455的博客

02-10

1013

滚动条样式-鼠标悬浮才展示滚动条

css中的滚动条以及清浮动

u011909890的专栏

09-01

1149

关于css的清浮动问题，很多时候当我们用了float：left或者right以后下个节点总是会出现在错误的位置。这时候我们要做的就是给前面运用float的父节点来清浮动。当然清浮动有很多种方法，我这里所讲的是其中的.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

10-21

JavaScript实现跟随滚动条漂浮的返回顶部按钮效果知识点解析：一、背景介绍：在网页设计中，当页面内容很长，超出了用户的显示区域时，为了提升用户体验，常常会设计一个返回页面顶部的按钮。随着用户滚动页面，...

Jquery跟随滚动条漂浮层

01-11

总结起来，"Jquery跟随滚动条漂浮层"涉及到jQuery选择器、事件处理、CSS定位、动态计算和响应式设计等多个知识点。通过理解和应用这些技术，我们可以创建出既实用又美观的网页交互效果。在实际项目中，还可以结合...

xScrollStick 跟随滚动条漂浮的JS特效

10-28

xScrollStick是一个用于Web页面的JavaScript特效，它的核心功能是让页面上的某些元素能够随着滚动条的移动而保持相对于浏览器窗口的固定位置。这种效果在网页设计中常用于制作浮动菜单、广告条、侧边栏等元素，即使...

css滚动条美化

XYLH2015的博客

11-16

610

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 5px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-...

css设置滚动条的样式

最新发布

yuzheh521的博客

05-15

659

css设置滚动条的样式。

js实现网页中常见的随滚动条移动的悬浮广告栏做法

04-13

这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高然后再除掉2，那么此时再加上可视区到顶部的距离就可以把这个盒子保始终停在页面的中间,但是这里会有一个小问题，那就是因为我们除去2运算了所以会出现小数的情况。这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。

CSS修改滚动条样式

DoubleInjured的博客

10-21

1464

CSS修改滚动条样式

overflow

离经叛道

07-07

458

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：值描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 ****注意:**ove.

【css】如何实现自定义滚动悬浮置顶、固定表头

hzxOnlineOk的博客

09-21

5435

到一个元素时，如果内容超出容器的尺寸，则会显示一个滚动条。与 scroll 不同的是，滚动条是以浮动的方式显示在内容上方，不会占用容器的空间。当应用于元素时，该元素在滚动时会固定在父容器的指定位置，直到滚动到达特定的位置或条件满足后，才会取消固定定位。这意味着，即使内容超出容器的高度，也不会显示滚动条或剪裁溢出的部分。：内容超出容器高度时，会根据需要设置是否显示滚动条，如果内容没有超出容器高度则不显示滚动条。：如果内容超出容器的高度，将显示滚动条，用户可以滚动查看超出的内容。：溢出的内容将被隐藏，不显示。

美观又实用，纯 CSS 悬浮菜单让网站更加出色

希望看完文章的你能够带着答案离开。

02-06

5332

美观又实用，纯 CSS 悬浮菜单让网站更加出色

html如何制作悬浮窗,使用js实现悬浮窗效果方法

weixin_39946355的博客

06-17

6914

很多网站效果，当页面向下滚动到某高度时候，导航栏或者其他会悬浮固定到顶部或某个位置，那么下面鹏仔就给大家简单介绍下css代码.show{position:fixed;top:0;}#nav{width:100%;height:60px;background:pink;}.box{height:2600px;width:100%;background:skyblue;}在style里...

HTML添加滚动条，并将滚动条改为hover显示

temperlili的博客

02-18

1041

实现JQuery跟随滚动条的动态漂浮层效果

标题和描述中提到的“Jquery跟随滚动条漂浮层”主要涉及到Web开发中使用jQuery实现的一个功能。该功能允许在网页上创建一个元素（通常是一个提示框、广告或者提示信息等），它能够随着页面的滚动条一起移动。这种...