JS Javascript用js做根据滚动条位置监听触发事件(附示例代码) 类似京东首页搜索框

橧易灬

已于 2022-02-23 19:56:01 修改

阅读量622

点赞数

分类专栏： JavaScript HTML笔记文章标签： javascript 前端 css3

于 2022-01-11 20:14:24 首次发布

本文链接：https://blog.csdn.net/weixin_56667794/article/details/122440393

版权

本文介绍了如何使用JavaScript监听滚动条事件，并根据滚动位置触发相应操作。通过添加滚动条监听事件，结合scrollTop属性获取上侧距离，可以创建类似京东首页搜索框的用户体验。示例代码展示了具体实现方法。

摘要由CSDN通过智能技术生成

JS Javascript 用js做根据滚动条位置触发事件类似京东首页搜索框

1.设置滚动条监听事件
2.添加滚动条位置判断触发事件
3.示例代码

1.设置滚动条监听事件

window.addEventListener( ‘scroll’ , function(){});

2.添加滚动条位置判断触发事件

返回滚动条上侧距离:document.documentElement.scrollTop;

3.示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

橧易灬

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js实现简易计时器

12-29

自己实现的简单的倒计时器，发现网上关于这方面的代码有是有，但写的界面都不堪入目，乱七八糟的。我自己用js手写了一个分享给大家，界面比较简洁，后面会再写一个比较酷炫的。如果没有积分还想下载的小伙伴可以加qq邮箱联系我，我发给你：1343121616@qq.com

js-5秒之后跳转页面

qq_41670147的博客

12-03

1769

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

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

js监听上下鼠标滚轮事件

最新发布

qq_33607094的博客

08-18

395

【代码】js监听上下鼠标滚轮事件。

js实现计时功能

祈澈菇凉

03-23

4790

原文链接：https://blog.csdn.net/qq_37936542/article/details/78912786一：计时器功能[javascript] view plain copy <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&gt...

JavaScript中的正则替换

goosman-lei

03-02

4217

String.replace(regexp, replaceText); 这是String类中的replace方法原型 replace方法接受两个参数:regexp: 正则表达式, 用来在字符串中搜索的规则.replaceText: 用来替换字符串中匹配正则表达式的子串的字符串在JavaScript中, 支持正则替换, 正则替换的规则如下:$$: 原意打印一个$符号

js正则表达式

jsczxy2

11-20

471

1、javascript 正则对象替换创建和用法： /pattern/flags 先简单案例学习认识下replace能干什么正则表达式构造函数： new RegExp("pattern"[,"flags"]); 正则表达式替换变量函数：stringObj.replace(RegExp,replace Text); 参数说明： pattern -- 一个正则表...

javascript搜索框效果实现方法

10-24

总结来说，JavaScript搜索框效果的实现是一个基础但实用的技巧，它结合了DOM操作、事件监听和样式修改，提升了网页的交互性和可用性。这样的功能在许多网站和应用程序的搜索功能中都有所应用，是前端开发中常见的...

【JavaScript源代码】JS实现百度搜索框.docx

12-29

在JavaScript中实现一个类似百度搜索框的功能，主要涉及到以下几个关键知识点： 1. **JSONP（JSON with Padding）跨域请求**：当我们需要从其他域名下获取数据时，由于浏览器的同源策略限制，常规的Ajax...

JavaScript实现搜索框的自动完成功能(一)

10-22

总的来说，JavaScript实现搜索框的自动完成功能涉及到前端与后端的交互、事件监听、DOM操作以及数据的渲染。通过这个过程，我们可以提高搜索效率，使用户在输入过程中就能得到实时的反馈，从而优化他们的搜索体验。

JavaScript切换搜索引擎的导航网页搜索框实例代码

10-19

在本文中，我们将探讨如何使用JavaScript来实现一个功能，即在导航网页上切换不同的搜索引擎搜索框。这个实例代码主要用于创建一个用户友好的界面，允许用户在百度、谷歌和搜狗等搜索引擎之间进行切换，而无需离开...

Js正则表达式替换

Donny的专栏

04-02

215

<html><BODY>This is a simple.oh<br>Today is fine.</BODY><script language="JavaScript">// 将指定的字符串标红(is或like或all或数字)// $1引用的就是(is)这个子表达式// $2引用的就是(like)这个子表达式// $3引用的就是(al...

js计时器(开始计时、停止计时、重置)

02-20

计时器的实现，有开始计时、停止计时、重置功能。

JS正则表达式（3）--替换规则，示例与详解

大剑师兰特的GIS世界

06-05

1139

正则表达式在JavaScript中不仅可用于查找匹配的文本，还能进行高效的替换操作。替换操作主要依赖于`String.prototype.replace()`方法，该方法接受两个参数：第一个参数是正则表达式或字符串（表示要查找的模式），第二个参数是替换后的字符串或一个回调函数（用于生成替换文本）。

js报错信息Uncaught TypeError: Cannot read properties of null (reading ‘appendChild‘)

weixin_44344709的博客

09-02

1097

最后一行leftTop.appendChild(bigPic)报错，首先打印了一下bigPic，没问题，然后在获取leftTop元素之后打印了一下leftTop，结果是null，所以是leftTop没有获取成功，对元素进行检查，原来是标签名写错了，应该是lefttop，我写成了leftTop，修改之后运行成功。以后遇到类名标签名这些，还是去复制粘贴比较安全啊。海燕啊，你可长点心吧！

JavaScript实现的计时器效果

wangyining070205的博客

03-03

1265

在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。

JS控制台报错Uncaught TypeError: Cannot read properties of null (reading ‘appendChild‘)；的解决方法