开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如果不使用jquery，如何在用户滚动100px后显示div？

如果不使用jQuery，可以使用原生JavaScript来实现在用户滚动100px后显示div的效果。

首先，可以使用window对象的scroll事件来监听用户滚动行为。每当用户滚动页面时，触发scroll事件，我们可以在事件处理函数中进行相应的逻辑判断。

首先，需要获取到用户滚动的距离。可以使用window对象的scrollY属性来获取当前滚动的垂直距离。然后，可以使用一个变量来保存div是否已经显示的状态。

接下来，在scroll事件处理函数中，可以判断滚动距离是否超过了100px，如果超过了，就将div的display属性设置为"block"以显示它，否则将其设置为"none"以隐藏它。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Scroll Div Demo</title>
    <style>
        #myDiv {
            display: none;
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

    <script>
        var myDiv = document.getElementById("myDiv");
        var isDivVisible = false;

        window.addEventListener("scroll", function() {
            var scrollDistance = window.scrollY;

            if (scrollDistance > 100 && !isDivVisible) {
                myDiv.style.display = "block";
                isDivVisible = true;
            } else if (scrollDistance <= 100 && isDivVisible) {
                myDiv.style.display = "none";
                isDivVisible = false;
            }
        });
    </script>
</body>
</html>

在这个示例中，通过监听window对象的scroll事件，实时获取用户滚动的垂直距离，然后根据这个距离来判断是否显示div。当用户滚动距离超过100px时，将div显示出来；当用户滚动距离不足100px时，将div隐藏起来。

这是一个简单的示例，你可以根据实际需求对div的样式和显示逻辑进行相应的修改。

相关搜索:在Vue中滚动100px后显示div标签如何使用jquery在页面加载时显示div？Jquery/ Ajax /CSS在使用Ajax缩小表单限制后显示/隐藏div 在向下滚动时隐藏导航栏，当用户使用jquery向上滚动页面时显示导航栏如何使用if语句在jquery中显示和隐藏2div？在滚动文档时，如果div的结尾出现在屏幕上，则修复它-使用jquery 如何使用户在30分钟不活动后注销？如何在使用jQuery load添加内容后强制固定位置的div滚动到顶部如何使用NodeJS和express在成功登录后显示用户信息如何使用Jframe在Java中成功登录后显示用户信息[登录表单]如何使用JS或Jquery在悬停时将文本显示到相应的div容器？如何使用viewHolder使listView用户输入在滚动出屏幕时不返回默认值如何使用CSS和Jquery在显示另一个可变宽度的div时将div滑过？jQuery:如何将DIV保持在屏幕顶部并在向上滚动(并到达其原始位置)后恢复其位置如何使用ajax jquery在不刷新的情况下显示插入的查询数据在使用jquery添加了从数据库获得的5个结果后，如何添加div？在使用Jquery .html()函数替换包含<script>的<div>后，如何从Javascript的内存中删除函数？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements...如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置 menu: '...、导航、元素等时使用 // paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements...如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置 menu: '...；如果使用all，则样式和html等全部被销毁 // destroy(type); // //重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果 // reBuild()

11.9K3 0

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！.../libs/jquery/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 <!...dom，调用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象。...注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...: none; } $('.box').show(); # 3. toggle() 方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

9905 0

jQuery基础

jQuery冲突问题使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权，还可以自定义一个符号来代替 $使用。...，释放之后就不能再使用$,改为使用jQuery jQuery.noConfict(); 2.自定义一个访问符号*/... jQuery的scrollTop方法 1.获取滚动定位 2.设置滚动定位示例 <!...():如果使用trigger方法,会触发事件冒泡,也会触发默认行为 2.triggerHandler():如果使用triggerHandle方法,不会触发事件冒泡,也不会触发默认行为示例 <!...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */

1.7K2 0

前端面试实录CSS篇（最近一周）

加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...如何设置小于 12px 的字体？ • 使用 webkit 内核的: -webkit-text-size-adjust: none;。chrome 27 版本后不可用了。...不要使用 @import 前缀引用样式，会影响 css 加载速度 6. 避免选择器嵌套过深 7. 不滥用 web 字体 • 可维护性，健壮性 1. 抽离公共样式 2. 样式与内容分离 16....在 CSS2.1 中，伪元素都是使用单冒号来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用双冒号 17. CSS 预处理器/后处理器是什么？为什么要使用他们？...• inherit: 规定从父元素继承 position 属性的 • sticky: 基于用户的滚动位置来定位 • 前面三者的定位方式如下： • relative：元素的定位永远是相对于元素自身位置的，

1111 0

三、jQuery属性操作

在浏览器中找到span这个DOM元素之后，展开看到的都是属性。在attributes属性中保持的所有内容都是属性节点。...如果设置的节点不存在，那么会新增该属性。 <!...，具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr() Javascript console.log...$('div').html('我是一个段落我是一个span') } image.png 如果不传入参数，则代表获取当前元素的 HTML 代码。...').css('width', '100px') $('div').css('height', '100px') $('div').css('background', 'red') 链式设置如果大于

3.8K2 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

，同时增加一些自己在使用中的一些技巧。...如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话，更推荐采用下面的这种 fallback 的写法，如果 CDN 的 JavaScript 代码没有加载成功...例： width:100px;height:100px;overflow:auto; 完成上述的操作之后，带有滚动条的内容块的滚动条，就变成这个插件的默认样式了。...官方的默认样式相对于白色的对比度不高，所以为了显示的明显一点，我加了一个深色的背景色。当然还有很多参数开扩展插件的功能，这些参数的使用方法过后再讲。...如果想使其重新可用，调用 update方法。disable 方法使用一个可选参数（默认 false）你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。

14.1K3 0

JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）

1 打开网页自动弹出广告效果【需求】： 1）当页面加载完，3秒后自动显示广告； 2）广告显示5秒后，自动消失；【分析】： 1）使用定时器setTimeout (执行一次定时器) ； 2）其实JQuery...的显示和隐藏动画效果就是控制display； 3）使用 show/hide方法来完成广告的显示；【代码实现】： //入口函数，在页面加载完成之后，定义定时器，调用这两个方法 $(function...2 抽奖效果实现【需求】： 1）点击开始按钮，小相框中滚动图片； 2）点击停止按钮，小相框停止滚动，大相框中显示选中的图片；【分析】： 1）给开始按钮绑定单击事件：定义循环定时器、切换小相框的.../img/man00.jpg" style="width:160px;height:100px"/> <!

2.3K4 0

jQuery文档对象模型DOM的实际应用

在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及，那么jQuery的DOM树，就是一个简笔画的小树...() nextUntil() prev() prevAll() prevUntil() 过滤 eq() 养成一个习惯，如果该jQuery方法可以设置元素值，那么该方法一定可以获取元素值。...； scrollTop(value)设置垂直滚动条的值; scrollLeft()获取水平滚动条的值； scrollLeft(value)设置水平滚动条的值; 案例：楼梯。...> jQuery 节点操作一．创建节点为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是： 1.创建节点...DOM 不推荐使用，会崩溃 $('div').wrap(document.createElement('strong')); //临时的原生 DOM $('div').unwrap(); //移除一层包裹内容

1.2K3 0

前端之JQuery

AJAX(不刷新页面同时修改页面内容) # 8. Utilities # 除此之外，JQuery还提供了大量的插件为什么使用JQuery?...如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持* JQuery对象 jQuery对象就是通过jQuery包装DOM...如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。...包含了许多维持状态的小部件(Widget),因此，他与典型的JQuery插件使用模式略有不同，所有的JQuery UI小部件(Widget)使用相同的模式，所有，只要你学会其中一个,你就知道如何使用其他的小部件

3.4K5 0

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。...传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。有很多网站使用无限分页的模式，即网页视窗到达内容底部就自动加载下一部分的内容......（即滚动到了底部）代码样例代码部分没有太多的内容，需要注意的是： 1 使用fixed定位加载框 2 使用setTimeout定时触发判断方法，频率可以自定义 3 通过真实内容高度 - 视窗高度 -...; padding-right: 100px; border-radius: 15px; } <div...当向下滚动了一下后，视窗的高度不变；上面隐藏的高度增加到100，即滚动条上面代表的部分。 ? 当触发加载后，视窗的高度保持变；上面隐藏的高度保持不变；文本的内容增加到1816； ?

6K10 0

看不完的那种！前端170面试题+答案学习整理（良心制作）

渲染动画 4.如何使用@keyframes使div元素移动200像素 div { widht:100px; height:100px; background: red; animation: move...27.如何用原生JavaScript实现jquery的ready方法 $(document).ready()在dom绘制完毕后就执行，而不必等到页面加载完毕。...>元素，如何使用jquery来选择它们可以使用标签选择器来选择所有的div元素，$("div")会返回一个包含5个div标签的jQuery对象。...如果盲人使用语音阅读功能，则会大声朗读图像的alt属性中的文本。当由于链接断开而无法显示图像时，将显示它。 Google和Yahoo!等机器人抓取图片的提示。...123.如何实现自适应布局可以使用媒体查询做响应式页面用Bootstrap的栅格系统使用弹性盒模型 124.在移动端如何做好用户体验清晰的视觉纵线信息的分组极致的减法利用选择代替输入标签以及文字的排布方式

11.5K5 0

五、jQuery动效

显示隐藏动画显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数：一个参数代表动画完成的时间两个参数第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数...li> 二级菜单下拉菜单案例在jQuery...中，如果需要执行动画，建议在执行动画之前先调用stop方法，然后在执行动画。...当使用stop时： ? 不适用stop时： ? <!...累加属性累加属性就是在原来基础上再次增加。在第一个参数值得位置填写字符传表达式即可。

2K3 0

jQuery

使用jquery的对象需要用$(this) // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式 $...鼠标移入移除事件回到顶部 13.事件冒泡什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回...> View Code 回到顶部 16.滚轮事件与函数节流 jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容...在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。...学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

4K2 0

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery能满足以下需求：取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？...}); 常用的 jQuery 事件方法文档DOM加载完成 $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。...---- #jQuery 效果隐藏和显示 jQuery hide() 和 show() jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示...可选的 callback 参数是隐藏或显示完成后所执行的函数名称。...，高度减少到100px，透明度40% div.animate({width:’100px’,opacity:’0.8’},”slow”); //最后执行，宽度减少到100px，透明度80% /

16.2K3 0

easyui布局——【入门】

目录第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可...所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在学习如何按照EasyUI的文档来使用其组件并且其常用组件有哪些。...③ 菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果 ④ 表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验 ⑤ 窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善...作用: 使用该组件可以快速完成网页的布局效果使用:使用HTML完成页面组件，具体参照API 方式: ① 在div中进行布局 ② 在整个页面中 ③ 嵌套布局布局区域:...;"> <div data-options

1.5K2 0

零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍

不损害他人利益的，符合国家规定的网页服务。 2.文件扩展名提问：如何使得文件的扩展名显示出来？...如果只使用了width，那么高度会进行等比例缩放。如果只使用了height，那么宽度会进行等比例缩放。...5.个别特殊符号举例 ©用来表示版权符号用来表示空格符号 6.关于滚动使用marquee标签标签的behavior表示滚动方式 direction表示滚动方向 7.其它标签...px（像素）来表示，但如果想要适应设备窗体大小变化，就要使用比例：例如调整宽度为100%在css中的写法如下 width:100% 五、网站代码结构基础代码结构的分割：头部toper 主体main...}); 在js中定位html元素与css定位html元素的方法是一样。 jquery是js中的一种整合框架。如何使用jquery来获取html元素呢？

1.3K3 0

06-移动端开发教程-fullpage框架

比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...">第三屏第四屏如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms...不兼容 animateAnchor 布尔值 true 事件名称说明 afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称

5.1K5 0

06-移动端开发教程-fullpage框架

比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...">第三屏第四屏如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms...不兼容 animateAnchor 布尔值 true 事件名称说明 afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称

5.1K9 0

vue操作dom元素的三种方法

: #212224; display: flex; } /* 添加数据源按钮 */ #DbManagement-addBtn { width: 100px...*/ /* 设置滚动条的样式 */ .addAlert-content::-webkit-scrollbar { width: 5px; } /* 滚动槽...webkit-scrollbar-thumb:window-inactive { background: rgba(29, 211, 211, 1); } CSS比正文和脚本加起来都多，如果你能看懂...CSS，没理由学不会 ref 还有第三种方法，jQuery 操作dom，看完以后直呼不敢用 3.jQuery操作dom 只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery...，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery

2.5K2 0

Web前端知识(四)

p”) 选取div后代中所有p标签(包括孙子) $(“div>p”) 选取div直接后代中p标签(不包括孙子) $(“div+p”) 选取紧跟div后的兄弟元素中第一个p $(“div~p”) 选取紧跟后的兄弟元素中的所有....jq中动画简介通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验. 4.1.9.2.jq中动画分类 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...").toggle(1000);}); 【隐藏和显示以及切换动画总结】: Ø注意:在无参数的时候,只是硬性的显示内容和隐藏内容。...4.1.9.5.jq动画综合案例 4.1.9.5.1.二级下拉菜单【效果图】： Html和css代码: 接下来：先隐藏起来所有的二级菜单 Js代码思路: 对于上面的代码，下拉菜单基本已经实现了，但是如果用户滑动鼠标太快了

7.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭