悬浮框随网页的滚动而滚动

最新推荐文章于 2021-09-28 14:38:06 发布
原创 最新推荐文章于 2021-09-28 14:38:06 发布 · 3.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #前端 #悬浮框

本文介绍了一种使用JavaScript和CSS实现悬浮框跟随页面滚动的效果。通过监听窗口滚动事件并计算悬浮框的位置，使得悬浮框能够平滑地跟随用户的滚动而移动。此方法适用于创建固定在屏幕上的导航栏或其他悬浮元素。

$("#qqlayer")为悬浮框容器

$("#qqlayer").css("top",$(window).height()/3+"px");

var qqlayer_top = $("#qqlayer").offset().top;

$(window).scroll(function(){
var offsetTop = qqlayer_top + $(window).scrollTop()-20+"px";
$("#qqlayer").animate({top : offsetTop },{ duration:600 , queue:false });
});
随页面滚动定位的侧边栏悬浮框js插件
04-28
随页面滚动定位的侧边栏悬浮框js插件，包括页面自适应、函数节流、悬浮区域高度自适应等。具体效果参考博客 https://blog.youkuaiyun.com/zh_rey/article/details/80136619
winform悬浮框跟随滚动条
04-02
在Windows Forms（WinForm）开发中，创建一个悬浮框（Floating Panel）并使其跟随滚动条移动是一项常见的需求，尤其在设计具有大量数据或长页面的应用程序时。这种功能可以提高用户体验，使用户能够轻松地查看和操作...
jquery 指定区域内随页面滚动悬浮
weixin_30627381的博客
07-30 316
原理：根据可悬浮区域高度及距顶部距离，设置绝对定位 + 跟随滚动修改top var height=$('#floatLayer').height();//悬浮块高度 var flyer = $('#baike_detail_main .detail_main .main_right .float_layer');//悬浮块 var dingweitop ...
js实现页面上下滚动跟随块
请告诉他
09-03 1334
背景：页面列表底部存在一些操作按钮，列表太长时候超过了显示器高度，需要滚动列表到最底部才能看到这些按钮进行操作 需求：列表没超过屏幕高度时候，这些按钮处于列表底部30px处，列表超出屏幕高度时候，这些按钮距离屏幕底部0px处，跟随页面滚动。 下图红色箭头所示这个按钮区域为正常显示状态 页面网上滚动效果如下 Html CSS /*块跟随*/ .list-bottom{ position: fixed; bottom: 20px; width...
屏幕滚动，悬浮窗的实现
yanmei2017的博客
09-28 733
屏幕滚动，悬浮窗的实现技术栈api 技术栈 vue、jq都写过 api 先认识几个api offsetTop： 元素顶部相对于包含元素的距离，这对于元素是嵌套层级时会有些难办，如想获取元素对于body的距离，得想好布局层级，减少一些计算。 getBoundingClientRect() ：方法返回元素的大小及其相对于视口的位置。所以top会随着屏幕滚动而改变 scrollHeight: Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可
页面滚动到底部，悬浮条固定到页面底部。
鸣人的博客
02-02 1437
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0; } body{height: 2800px;} p{
让某部分HTML随滚动始终显示在页面上
热门推荐
cui_angel的专栏
07-24 1万+
我们经常在淘宝网看到这样的特效，商品列表特别长，而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了，那么它会自动判断是否到顶端了，然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的，在实际开发中有不少用途，下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码，兼容性不错，在IE、Firefox、Chrome下都能正常工作。 使用这个特
jQuery网页右侧广告跟随滚动代码分享
10-23
通过定义一个名为smartFloat的函数，该函数能够使得元素在滚动条向下滚动时保持固定位置，当滚动条向上移动时，元素则随内容滚动。 2. 详细步骤解析： - 首先，使用$.fn.smartFloat函数来定义广告的行为。 - 通过...
实现Winform中悬浮框随滚动条动态移动的方法
需要注意的是，在实际的应用中可能还需要考虑悬浮框的其他交互逻辑，比如用户可能希望悬浮框能够固定在窗口的某个位置，或者悬浮框随着用户滚动操作而关闭等。这些都需要在程序逻辑中额外处理。 最后，关于给定的...
腾讯QQ网页在线客服，随网页滚动条上下移动的效果一
12-10
在网页设计中，实现腾讯QQ网页在线客服那种随滚动条上下移动的效果，是一种常见的交互设计手法，它能够确保用户在浏览页面时始终保持客服窗口在视线范围内，方便用户随时咨询。这种效果通过JavaScript、CSS和HTML三...
标题头滑动悬浮效果
04-13
标题头滑动停留头部，悬浮效果。
网站联系我们效果悬浮框
08-06
NULL 博文链接：https://1358440610-qq-com.iteye.com/blog/2082530
页面悬浮窗口源码
11-11
页面悬浮窗口源码,完美运行不会出现悬浮窗口卡顿那种现象。直接运行test.html看效果！！
网站绝对定位左右悬浮框
05-11
长用于网站制作要求左，右各有一个绝对定位的悬浮框
js+html实现点击按钮列标滚动（scrollTop）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 1587
效果图 实现点击上下按钮，滚动条滚动。 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s..
div 跟随页面上下滚动条移动
weixin_30596735的博客
02-20 994
$(window).scroll(function () { var scrollHeight = document.documentElement.scrollTop; $("#WaitLst").css({ top: scrollHeight + 200 + "px" }).show(); //WaitList 是 div ID }); 转载于:https://www.cnblo...
浮动的div随滚动条滚动而滚动
lml_little的博客
09-14 8239
使用fixed样式浮动时，当浏览器窗口变小，fixed的宽度不变，内容部分被遮住了怎么办？ 要想fixed也滚动才能看到内容，但是fixed滚动的话就不受别的滚动条的控制了，并且我还不希望fixed出现滚动条，这样影响了美观。 那么，我想到的办法是用jq监控window的滚动条，操作window的滚动条就相当于操作fixed的滚动条。不想看到fixed的滚动条的话，用css样式把它变为透明，就
滚动悬浮框——js全解
Front-End严黑C的博客
06-01 2768
本文主由position:fixed在ie6下不支持而引起的的'血案’——涉及1.window.onscroll=window.onresize来控制窗口滚动和大小变化；2.scrollTop的兼容控制；3.if(!window.XMLHttpRequest)来判断是否为ie6，可以联想到Ajax创建XHR对象；4.待完善的地方在于offsetHeight的bug，offsetHeight包括border和padding的问题需要用getStyle来处理下......
CSS实现浮动层跟随滚动条特效(兼容IE6)
weixin_30279751的博客
05-24 414
众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器： １．onScroll脚本实现 首先，用DW辅助可生成一个浮动层Div的样式: #menu{ position:fixed;/*低版本浏览器不支持*/ _position:absol...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值