讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

js跟随滚动条滚动浮动代码_javascript技巧

php中文网
发布： 2016-05-16 18:37:47
原创
1688人浏览过
复制代码 代码如下:

var str="客服";
var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10);
objFT.FloatRun();


//js跟随滚动条滚动 浮动
//pObjName:html 元素ID
//pText:html 元素内容
//其它自己看
function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,pstmnGAP2,pstmnBASE,pstmnActivateSpeed,pstmnScrollSpeed)
{
var FloatMenu;
var stmnLEFT = pstmnLEFT;
var stmnGAP1 = pstmnGAP1;
var stmnGAP2 = pstmnGAP2;
var stmnBASE = pstmnBASE;
var stmnActivateSpeed = pstmnActivateSpeed;
var stmnScrollSpeed = pstmnScrollSpeed;

this.FloatRun=function(pObjName)
{
var newDiv=document.createElement("div");
newDiv.id=pObjName;
newDiv.innerHTML=pText;
newDiv.style.position="absolute";
document.body.appendChild(newDiv);
FloatMenu=document.getElementById(pObjName);
FloatMenu.style.display=="";
FloatMenu.style.top = document.documentElement.scrollTop + stmnBASE+"px";

FloatMenu.style.left = stmnLEFT+"px";
RefreshStaticMenu();
}

RefreshStaticMenu=function()
{
var stmnStartPoint,stmnEndPoint,stmnRefreshTimer;

stmnStartPoint = parseInt(FloatMenu.style.top, 10);
stmnEndPoint = document.documentElement.scrollTop + stmnGAP2;
if (stmnEndPoint
if(stmnStartPoint != stmnEndPoint)
{
stmnScrollAmount = Math.ceil(Math.abs(stmnEndPoint - stmnStartPoint) / 15 );
FloatMenu.style.top = parseInt(FloatMenu.style.top, 10) + ((stmnEndPointstmnRefreshTimer = stmnScrollSpeed;
}
else
{
stmnRefreshTimer = stmnActivateSpeed;
}
setTimeout("RefreshStaticMenu();", stmnRefreshTimer);
}
}
相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：用js做一个小游戏平台 (一)_javascript技巧 下一篇：js 学习笔记（三）_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript能做什么_为什么它被称为全栈开发语言 JavaScript是真正的全栈语言，因其同一套语言、思维和工具链已在前端、后端、移动端、桌面端及物联网等全链路生产环境中成熟落地。
2025-12-23 14:49:02
290
JavaScript数组方法有哪些常用技巧？ JavaScript数组方法的核心是理解返回值、是否改变原数组及适用场景：map用于变换生成新数组，filter安全筛选，reduce聚合数据，flat/flatMap处理嵌套结构。
2025-12-23 14:47:19
396
如何实现继承_javascript中有哪些模式？ JavaScript继承有四种模式：1.原型链继承，通过prototype实现方法复用但属性共享；2.借用构造函数，用call/apply复制属性但无法继承方法；3.组合继承，结合前两者，属性独立且方法复用；4.ES6class，语法糖封装原型链，语义清晰且功能完备。
2025-12-23 14:43:41
325
javascript如何实现继承_有哪些方法 JavaScript继承推荐使用ES6classextends，其底层基于原型链；手动实现最优方案是寄生组合继承，用Object.create优化组合继承的重复调用问题。
2025-12-23 14:37:31
408
javascript的模块化是如何发展的_ES6模块与CommonJS有何不同 JavaScript模块化演进为从无到有、手动管理到标准化的过程，ES6模块（ESM）与CommonJS是两大主流方案，核心差异在于加载时机（编译时静态vs运行时动态）、导出机制（活绑定vs值拷贝）、语法设计（default/named导出vs单一module.exports）及运行环境适配。
2025-12-23 14:13:02
856
如何用JavaScript实现懒加载_提升网页加载速度？ 懒加载的核心是元素进入视口时才加载资源，推荐使用IntersectionObserverAPI监听并触发加载，兼容性不足时降级为节流scroll+getBoundingClientRect，同时需处理图片load/error状态及首屏关键资源优化。
2025-12-23 14:07:19
217
JavaScript如何利用本地存储？ JavaScript通过localStorage和sessionStorage实现本地存储：前者长期保存、跨会话有效，后者仅限当前标签页生命周期；均以字符串键值对存储，需JSON序列化对象，注意容量限制与安全风险。
2025-12-23 14:06:08
337
如何实现javascript状态管理_Redux和Mobx有何设计哲学差异 Redux强调唯一数据源与不可变更新，状态存于单一store，变更需通过纯函数reducer返回新对象；MobX主张响应式透明与面向对象建模，用observable自动追踪依赖并触发更新。
2025-12-23 14:06:08
830
javascript中的数据结构是什么_如何实现栈和队列？ JavaScript中无内置栈和队列，可用数组模拟：栈用push/pop实现LIFO，队列用push/shift实现FIFO；高性能场景可用环形缓冲区优化，封装成类提升复用性。
2025-12-23 14:04:30
542
什么是javascript JIT编译_它如何提升代码执行速度？ JIT编译是运行时将热点代码转为优化机器码的技术：先解释执行，再监控标记热点，接着编译优化，最后去优化保障正确性；它通过消除重复解析、利用运行时类型信息、函数内联、内存直接寻址等提升性能。
2025-12-23 14:02:05
930
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部