运用onscroll事件//滚动窗口滚动条时触发

最新推荐文章于 2021-03-19 16:46:42 发布
最新推荐文章于 2021-03-19 16:46:42 发布
阅读量522 收藏 1
点赞数
文章标签： 爬虫 移动开发
原文链接：http://www.cnblogs.com/R-jia-bao/p/6143011.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day08_作业讲解</title>
<style>
body{margin: 0;height:2000px;}
header{
height: 60px;
background: #f00;
}
.toolbar{height:300px;border: 1px solid #000;}
.fixed{position: fixed;top: 0;left: 0;right: 0;}
</style>
<script>
//页面加载时间
window.onload =function(){
//顶部悬浮(吸顶菜单)
//1)获取元素
var topNav = document.getElementById("topNav");
//2)当滚动到指定位置是给#topNav添加fixed类
//绑定滚动事件 (gunlun/拖动滚动条)时执行函数中的代码
window.onscroll = function(){
//console.log('1111');

//获取滚动条滚动过的距离
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

// 当滚动到<指定位置>时给#topNav添加fixed类
if(scrollTop >= 302){
//给元素添加类:ele.className = 'xx';
topNav.className = 'fixed';
}else{
topNav.className = '';
}

}



}
</script>
</head>
<body>
<div class="toolbar"></div>
<header id="topNav"></header>
</body>
</html>

转载于:https://www.cnblogs.com/R-jia-bao/p/6143011.html

SimminonGarcia
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析window.onscroll=move以及window.onscroll=move()的区别
欢迎大家对日志做评论，有转载有自编，难免存在错误，望大家顺手指正，谢谢！^_^
12-18 6750
<br />事件 =带括号的函数 是获取return值 ,事件 =不带括号的函数 是将函数本身赋给事件,事件="函数带括号" 是执行函数<br /><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled Document</title> <mce:script language="
iscroll5 增加scrollMove事件，增加minScroll[X/Y]属性
08-23
iScroll5【注意，不是4，请参见5语法编写脚本】没有scrollMove事件，可以使用myscroll.on("scrollMove",function(){...});自绑定。原iScroll5是不支持设置最上滚动距离的。所以在导致将最上部分的元素设置为margin-top:-xxxpx时是没办法显示的，特此做出修改，在任何事件中都可以对this.minScrollX，this.minScrollY进行设置，设置完毕后立即生效，注意：请不要refresh()，不然二者会会被重新设置为0。=====修改基于iScroll5.1.2，想要知道修改位置的同学可以与原版本脚本对比。有问题欢迎交流~
JavaScript之onscroll事件
arvin_top的博客
04-15 6717
onscroll事件 •是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发 •如果页面没有滚动条或者没有发生滚动操作，则不会执行onscroll事件 •从属于window对象，事件应绑定到window对象上 scrollTop和scrollLeft •当页面内容区域超出了浏览器展示范围，页面会出现滚动条 •scrollTop指的是向上滚动头部高度 •scrollLeft指的是向
onscroll如何实现层随页面滚动
myheartjava的专栏
12-04 488
var checks = 0;     var GB =0;     function openwindow()     {      checks = document.getElementById("player").style.pixelTop;      GB = document.getElementById("myplay").style.pixelTop;     }
ajax实现下拉刷新+上拉加载
weixin_33834075的博客
05-29 983
上面动图是实现的效果。 全程无需重新加载整个页面，只需要上下拉即可刷新数据！ index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上拉加载</ti...
js操作滚动条事件实例
12-10
当用户滚动页面时，`onscroll` 事件会被触发。这段代码的主要目的是控制一个返回顶部的`div`元素的显示和隐藏： ```javascript window.onscroll = function () { var t = document.documentElement.scrollTop || ...
【js】js和jq实现回顶动画效果和滚动条监听事件详解
01-20
滚动条监听事件可以帮助开发者在用户滚动页面时触发某些功能，例如加载更多内容、调整侧边栏位置等。以下展示如何使用JavaScript和jQuery实现滚动条监听： 1. 使用JavaScript： JavaScript提供两种监听滚动事件的...
JS简单判断滚动条的滚动方向实现方法
10-19
1. `window.pageYOffset` 或 `document.documentElement.scrollTop`（对于不支持`pageYOffset`的老版本浏览器）：这两个属性都表示当前窗口或文档在垂直方向上被卷去的距离，即滚动条顶部到视口顶部的距离。...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
12-11
为了实现滚动同步，可以使用 `window.onscroll` 事件监听滚动条的滚动，然后更新 `#popup` 的位置，使其始终保持在屏幕中心。然而，这段代码没有包含这部分JavaScript，所以要实现这个功能，还需要添加对应的滚动...
关于 IScroll5 和IScroll4 的一些用法
好好学习
01-26 7573
最近做滚动效果，用到IScroll，当然就直接使用IScroll5了，在移动端用的iscroll-lite，轻而小但是 没翻页无限加载的功能      主要是 用到了在IScroll 里面在嵌入 一个IScroll  ，在IScroll4 里还是有决绝的办法，IScroll5就无能为力了(ps:应该有办法，只是本人没找到)，最后只把两个IScroll 做为同一级的元素，实现的。 iScrol...
JavaScript触发onScroll事件的函数节流详解
10-20
的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流，文中由一个常见的问题开始展开，一步步的介绍解决的方法，有需要的朋友们下面来跟着小编一起看看吧。
onscroll事件滚动距离_JavaScript 常用事件大全
weixin_39862484的博客
11-20 1789
1、一般事件: onClick -- 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick -- 鼠标双击事件 onMouseDown -- 鼠标上的按钮被按下了 onMouseUp -- 鼠标按下后，松开时激发的事件 onMouseOver -- 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove -- 鼠标移动时触发的事件 onMouseOut -- 当鼠标离...
onscroll在移动端的使用
weixin_30500105的博客
05-22 515
1.实际需求   （移动端项目）当往下滑动到一定距离时，显示导航栏，导航栏定位在顶部，当向上滑动并小于那个距离时，导航栏隐藏。 2.解决方案   实时监测浏览器滚动高度，绑定onscroll事件，具体详情见此文--https://github.com/merrier/mobile-scroll-events，此文介绍的很详细，包括在Android 和 ios上的兼容性问题，以及处理方案。下...
scroll事件频繁触发
try again
06-28 5595
写这个标题的时候 我知道我写了一句废话  scroll在用鼠标滚动的时候 触发速度 远超于想象   但是 我们还是要绑定一些事件上去 ，结果频繁触发的时候 给人一种很绝望的感觉    对不对   特别是 懒加载（lazeload）对于懒加载  不清楚的可以去看看 什么是懒加载     onscroll=function（）{     }频繁触发  我们应该控制：
scroll 事件的触发
FE-阿阳的博客
02-05 1783
scroll 事件的触发 详情描述 window.addEventListener('scroll',function () { }) //ios上只会在滚动稳定后出发；安卓会有间隔的持续触发；
php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
weixin_33608760的博客
03-19 230
实例 元素滚动时执行 JavaScript定义和用法onscroll 事件在元素滚动条在滚动时触发。提示： 使用 CSS overflow 样式属性来创建元素的滚动条。浏览器支持语法HTML 中:JavaScript 中:object.onscroll=function(){myScript};JavaScript 中, 使用 addEventListener() 方法:object.addEve...
滚动事件监听 onscroll所实现的效果
qq_42454206的博客
07-17 1662
&lt;script&gt; window.onscroll = function() { console.log("1111") } &lt;/script&gt;
vue3 nuxt3环境下，滚动条触发css动画
最新发布
05-30
在Vue3中，你可以使用`v-scroll`指令来监听滚动事件。而在Nuxt3中，你可以在组件的生命周期钩子函数`mounted`中使用`$refs`来获取DOM元素。因此，你可以在组件中使用以下代码来实现滚动条触发CSS动画： ```html <template> <div class="container" v-scroll="onScroll"> <div class="content" ref="content"> <!-- Content Here --> </div> </div> </template> <script> export default { methods: { onScroll() { const content = this.$refs.content; const contentTop = content.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (contentTop < windowHeight) { content.classList.add('animate'); } else { content.classList.remove('animate'); } } } } </script> <style> .content { transition: transform 0.5s ease-in-out; } .animate { transform: translateY(50px); } </style> ``` 在这个例子中，我们使用了`v-scroll`指令来监听滚动事件。当滚动事件被触发时，`onScroll`方法会被调用。在该方法中，我们使用`$refs`来获取`.content`的DOM元素，并使用`getBoundingClientRect()`方法获取该元素的位置信息。然后，我们将窗口的高度与`.content`元素的位置信息进行比较。如果`.content`元素的顶部位置小于窗口高度，则添加`animate`类名，否则移除`animate`类名。在CSS中，我们使用`transition`属性来定义过渡效果，使用`transform`属性来定义动画效果。 请注意，该方法只是一个简单的示例，你可以根据自己的需求调整代码。也可以使用第三方库如`vue-scrollama`来实现更复杂的滚动动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值