js 滚动到指定位置显示或隐藏元素

最新推荐文章于 2024-07-03 23:11:17 发布

paco2010

最新推荐文章于 2024-07-03 23:11:17 发布

阅读量2.1k

点赞数

本文介绍了一个使用jQuery实现的页面滚动监听效果案例。当页面滚动到一定距离时，元素淡入显示；反之则淡出隐藏。具体实现涉及jQuery的scroll事件及scrollTop属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
$(window).scroll(function(){
var scroll_top=$(window).scrollTop();
console.log(scroll_top)
if(scroll_top>=200){
$("#lianxi").fadeIn();
}else{
$("#lianxi").fadeOut();
}
})
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

paco2010

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js滚动到指定位置显示或隐藏元素

weixin_44614518的博客

08-04

4070

在写小米商城购买页的时候有个导航栏需要在滚动页面到一定位置的时候固定显示，反之隐藏官网页面连接：https://www.mi.com/buy/detail?product_id=14206 1、 HTML 2、css 3、js 4、先获取滚动的时候页面的高度，用scrollTop（）方法，scroll是滚动事件，scrollTop变量是用来保存获取到页面高度值，然后判断scrollTop是否大于自己设置的页面高度，我这里设置为203，如果滚动页面高度大于这个设置的高度则这个模块显示，我的是通过设置

js使页面滚动到特定元素上

weixin_57768308的博客

03-06

2820

使用Element.scrollIntoView()方法

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

JS滚动到某地方显示或隐藏

weixin_42456392的博客

09-08

917

js 滚动到某地方显示隐藏

页面滚动到指定位置——js中scrollIntoView()的用法

yehaocheng520的博客

05-23

1万+

页面滚动到指定位置——js中scrollIntoView()的用法

JS滚动到指定元素位置

qq_42617840的博客

11-21

2780

Js设置页面滚动到指定元素位置

js滚动条滚动到指定元素

GeniusXYT的博客

03-04

9593

this.$nextTick(() => { let item = document.getElementById("card-item"); // 指定的元素 let wrapper = item.parentElement.parentElement; // 其父元素 - 必须是产生滚动条的元素 // el.focus(); // 元素聚焦法定位，有时定位不全，可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的元素需要主动

JS原生滚动到指定元素

热门推荐

ymzhao

05-04

1万+

Element.scrollTo()、Element.scrollIntoView()、Element.focus()

elementUI滚动条,点击dom元素滚动到指定位置.pdf

12-16

ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API，我们可以快速实现滚动条的...

基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

10-17

在本文中，我们探讨了如何使用Vue框架实现滚动条滚动到指定位置时，页面上的数字进行tween动画特效。tween动画是一种在两个值之间创建平滑过渡效果的动画技术。Vue作为一个流行的前端框架，提供了丰富的功能来实现...

jQuery实现将div的滚动条滚动到指定位置

10-27

2. **滚动条**: 当div的内容超出其宽度或高度时，浏览器会自动显示滚动条，以便用户查看隐藏的内容。 3. **jQuery**: jQuery是JavaScript的一个库，提供了丰富的API，简化了JavaScript编程，如选择器、事件处理、...

JavaScript控制网页平滑滚动到指定元素位置的方法

12-11

本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下： function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; curtop += obj.offsetTop; }

js/html实现滚动到顶部底部某个指定位置

09-20

js/html实现滚动到顶部底部某个指定位置简单易懂上来就能使用

js，jquery滚动/跳转页面到指定位置的实现思路

10-25

如果要在B页面内部点击某个元素（如按钮、图片等）滚动到指定位置，可以使用JavaScript事件监听。例如，对于一个按钮，可以这样处理： ```html 点击button跳转" onclick="click_scroll();" /> 点击这里本页跳转...

JS滚动时显示元素

分享学习网络的点点滴滴

07-03

356

● 之后，我们定义一个函数来处理观察者监听到变化的时候，我们应该干啥，就是移除掉section–hidden这个class。● 我们的目的呢，就是当滚入到某一节中，将section–hidden给去除就可以了。● 最后呢，我们对section元素进行迭代处理，默认情况是，这些元素是不可见的。● 接着呢，我们需要定义对象来监视页面上所有的section的视口变化。● 首先，我们先获取想要的class，存储变量中。

js如何設置滾動到元素位置

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

04-17

2937

在JavaScript中，你可以使用方法或元素的方法来设置滚动位置。这些方法允许你将页面滚动到特定的坐标或元素。

jquery中点击某元素后滚动条滚动到某元素位置或底部

euxil97的博客

08-14

6315

//首先获取文档对象 var target; if(document.documentElement.scrollTop){ target=$("html"); }else{ target=$("body"); }//到某元素$("#nu").on("click",function(e){ e.preventDefault(); var timer=setInter

js实现平滑滚动到指定位置

weixin_46413834的博客

03-10

1万+

方案一 : 基于js实现平滑滚动的效果 // 实现滚动条平滑滚动的方法 scrollToCmtList() { // 1.1 返回文档在垂直方向已滚动的像素值 const now = window.scrollY // 1.2 目标位置（文章信息区域的高度） let dist = document.querySelector('.article-container').offsetHeight // 1.3 可滚动高度 = 整

原生js 平滑滚动到页面的某个位置

u013689712的博客

03-28

2059

原生js 平滑滚动到页面的某个位置

vue屏幕滚动到一定位置，让某个元素显示

最新发布

12-27

### 使用 Vue.js 实现滚动监听并触发元素显示为了实现在页面滚动到特定位置时显示某个元素的功能，可以利用 `IntersectionObserver` API 或者通过监听窗口的 `scroll` 事件来检测目标元素是否进入视口范围。下面展示如何基于这两种方法之一，在 Vue 组件内完成此功能。 #### 方法一：使用 IntersectionObserver API 这种方法更加高效且易于管理，因为它不需要频繁地处理全局 scroll 事件。只需要配置好观察器选项即可让浏览器自动通知何时满足条件。 ```javascript export default { data() { return { isVisible: false, observer: null }; }, mounted() { this.observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { this.isVisible = true; // 停止观察该元素以防多次触发 this.observer.unobserve(entry.target); } }); }, { threshold: [0] }); const targetElement = document.querySelector('.target-element'); if(targetElement){ this.observer.observe(targetElement); } }, beforeDestroy() { if(this.observer && 'disconnect' in this.observer){ this.observer.disconnect(); } } } ``` 上述代码片段展示了如何初始化一个 `IntersectionObserver` 来监视具有 `.target-element` 类名的目标 DOM 元素，并在其首次进入屏幕可视区域时设置组件状态变量 `isVisible` 为真[^2]。对于模板部分，则可以根据这个布尔值控制 CSS 样式的应用： ```html <div v-bind:class="{'show': isVisible}" class="hidden-by-default">  </div> ``` 以及相应的样式规则： ```css .hidden-by-default{ opacity: 0; /* 默认隐藏 */ } .show{ transition: all .5s ease-in-out; transform: translateY(0); opacity: 1 !important;/* 显示出来 */ } ``` 这样就实现了当页面滚动至指定位置时动态改变元素可见性的效果。