jq如何监听网页的滚动

最新推荐文章于 2023-06-07 10:57:29 发布
最新推荐文章于 2023-06-07 10:57:29 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 前端 文章标签： javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62601942/article/details/121973535
版权

html

<body>
<img src="images/left.png"  class="left">
<img src="images/right.png"  class="right">
</body>

css

*{
  margin:0;
  padding:0;
  }

.left{
  float:left;
  position:fixed;
  left:0;
  top:200px;
  }

.right{
  float:right;
  position:fixed;
  left:0;
  top:200px;
  }

img{
  display:none;
  }

js+jq

$(function(){
  //1.监听网页的滚动
  $(window).scroll(function(){
  //2.获取网页滚动的偏移量
    var offset=$("html,body").srcollTop();
  //3.判断网页是否滚动到了指定的位置
    if（offset）>=500){
       //4.显示广告
       $("img").show()
       }else{
       $("img").show() 
       }
 })

木木要学习
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery监听窗口滚动事件
weixin_48596030的博客
11-02 2913
jquery监听窗口滚动事件
jQuery实现的监听导航滚动置顶状态功能示例
10-18
知识点： 1. jQuery基础使用：jQuery是一个快速、小巧、功能丰富的JavaScript库，通过jQuery...这种交互式的网页设计可以提升用户体验，让用户在浏览长页面时能够快速定位到导航栏，而不需要通过滚动返回页面顶部。
jq监听页面的滚动
qq_30068989的博客
02-21 4076
1、当前滚动的地方的窗口顶端到整个页面顶端的距离： var winPos = $(window).scrollTop(); 2、获取指定元素的页面位置： $(val).offset().top; 3、对页面滚动条滚动的监听：要放在页面加载的时候 $(window).scroll(function(event){}); 4、设置滚动条到指定位置。。 $(wind...
jquery监听滚动条，实现“返回顶部”
m0_72495985的博客
11-06 1256
我们在浏览网页时，网页内容过多会使得滚动条缩小并越来越靠近页面底部，当想返回到页面最顶端时靠滚动鼠标会很麻烦，因此在很多网页在靠近滚动条处都有一个“返回顶部”等内容的按钮，以快速的回到页面最顶端。
jQuery检测滚动条(scroll)是否到达底部
Carl_Zhang
02-06 4348
一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scr
jquery如何使用滚动条监听事件
an17822307871的博客
02-13 654
jquery使用滚动条监听事件的方法：1、使用【$(window).scrollTop():】获取垂直滚动条距离文档头部的高度；2、使用【$(document).scrollLeft()】获取水平滚动条的距离。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 jquery使用滚动条监听事件的方法： 先来一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function(){//在文档加载完毕后执行 $(...
jq鼠标滚动视差效果.rar_jq鼠标滚动视差效果
09-20
在这个特效中，jQuery被用来监听鼠标的滚动事件，根据滚动的幅度和方向，改变页面上各个元素的位置和透明度，从而实现视差滚动效果。 在【压缩包子文件的文件名称列表】中，只给出了"jiaoben779"，这可能是源代码...
jq带滚动条图片滚动特效代码
03-20
在网页设计中，动态效果的运用可以极大地提升用户体验，其中图片滚动特效就是一种常见的视觉呈现方式。"jQuery 带滚动条图片滚动特效"是通过 jQuery 库实现的一种功能，它可以使得图片在水平方向上形成连续的滚动...
【js】js和jq实现回顶动画效果和滚动条监听事件详解
01-20
在网页开发中，为了提升用户体验，常常会使用JavaScript（js）和jQuery（jq）来实现各种交互效果，其中“回顶动画”和“滚动条监听事件”是非常实用的技术。这两种功能能够帮助用户轻松地返回页面顶部，并且允许...
jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
10-30
全屏页面滚动效果的核心在于监听用户的滚动事件，并对页面内容进行相应的定位和动画处理。在jQuery中，可以使用`$(window).scroll()`函数来绑定滚动事件。当用户滚动页面时，这个事件会被触发，然后执行我们定义的回...
jQuery监听页面滚动
weixin_43952978的博客
04-24 2296
在html页面中，有时需要当页面滚动到一定位置时，将某个元素固定在某个位置，如图所示 此时可以调用jQuery的scroll()方法，监听页面滚动了多少距离，当达到某个距离时，将此元素的position属性设置为absolute。 $('body').scroll(function () { var top=$('body').scrollTop();//获取...
移动端触摸事件 js jQery监听点击及释放点击
最新发布
weixin_49098968的博客
06-07 591
在做手机端页面时，ui给了一个交互效果是在点击时添加某种样式，点击释放后此样式消失。touchstart、touchend事件
js、jQuery实现数字滚动效果
努力变好
03-24 2378
引入js（js在下边，复制就行，jquery文件自己引入吧），写入jQuery。一、效果（监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果）滚动数字加上类名counter。
JQ动态监听滚动条位置
summer_gf的博客
06-08 2668
JQ动态监听滚动条位置并执行指定命令 例如：给div添加类或移除类 我一本用来改变头部的样式。 第一步：引入jq文件 <script src="style/js/jquery.min.js"></script> 第二步：设置变量等于滚动条当前位置，并做出判断 $(window).scroll(function(){ var st = $(window).scrollTop(); if(st>80){
jQuery 事件 scroll() 方法的使用教程
cuishouming的博客
11-13 6047
当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 函数触发 scroll 事件。或者如果设置了 function 函数，则规定当发生 scroll 事件时执行的代码。 首先介绍一下(document).height()与$(window).height()的区别： $(document).heig...
监听页面滚动及滚动到指定位置
duguxueao的专栏
09-27 4943
两种监听页面滚动的方法 一、原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性，这里取两个值，哪个有值取哪一个 //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滚动距离" + scrollTop); } 二、Jque
jquery监听页面滚动条滚动事件
热门推荐
qq_29207823的博客
08-10 4万+
$(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 ...
jq监听页面滚动时间
05-31
你可以使用jQuery的scroll()方法来监听页面滚动事件。下面是一个示例代码： ```javascript $(window).scroll(function() { // 在这里编写处理页面滚动事件的代码 }); ``` 在这个示例中，我们将window对象上的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值