如果不使用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的样式和显示逻辑进行相应的修改。
相关·内容
我有一个div是固定到我的网站的页脚，这是使用CSS定位，在页面加载时不可见。我希望它显示一旦用户滚动了至少100px在页面上，并隐藏时，用户已滚动回来。我在stackoverflow和其他使用jquery的网站上看到过这样的例子，但我正在寻找一种只使用javascript的解决方案。我包含了一个jquery版本，它说明了我想要
浏览 35提问于2021-01-29得票数 0
我有一个div，它会在滚动到100px后隐藏，但如果他们在滚动到180px或这样的显示时刷新整个页面，在我开始滚动后不久，它就会恢复隐藏。我如何处理这种情况，即使在刷新后，如果页面滚动到100px以上也不显示以下是我用来隐藏div的脚本，我可以对此脚本更好地
浏览 0提问于2016-02-23得票数 0
2回答
我知道为了向上或向下移动页面内容，有必要嵌入到具有固定宽度和高度的div中，所以你必须在两个方向上滚动才能到达所有内容。我试图做的，是模拟手机滚动，我的意思是，“推”(一次触摸)底部或左侧，以便在div中自动滚动底部或左侧。 <div class="dvParPal"
浏览 3提问于2017-08-30得票数 0
5回答
我有一个带有css的divmargin: 20px 0;min-height: 100px;width: 100%;}<div class="comment-list"> </div>
如果滚动值太高，y就会出现，而且没有任何内容，任何<em
浏览 5提问于2015-01-06得票数 0
回答已采纳
2回答
有没有一种方法来显示一个图像或一个div时滚动一个网页和隐藏它时，不滚动，反之亦然？.square { width: 100px;}
background: gr
浏览 2提问于2022-06-23得票数 0
有1个正在显示的主要部分和4个空白部分，即无显示。滚动到窗口底部时，它工作正常。当滚动到底部时，是将数据添加到div，当您滚动到底部时，会逐个显示块。但我想改变它。如果只有main div，当用户滚动到main div时，则显示#flash-sale，当用户滚动到#flash-sale时，再次显示#main c
浏览 19提问于2021-01-03得票数 0
回答已采纳
2回答
我试图在用户在我的网站上滚动到200px后水平滑动固定的图像。代码看起来像这样：div#slideimage position: fixed; width: 500%;
$(window).scroll(function () { $('#slideimage').
浏览 0提问于2012-11-23得票数 1
回答已采纳
Facebook的新时间线功能给我留下了深刻的印象，特别是当你向下滚动个人资料时，会显示一个小菜单，让你可以选择查看他们的时间表或查看有关他们的更多信息。此div仅在您向下滚动到页面的特定长度时显示，然后当您向上滚动时，I再次消失。
我正在构建一个项目，这种类型的系统将使它受益良多。有一个很长的FAQ页面，我认为在屏幕左侧提供FAQ的菜单会更好，这样用户就可以自然地向下滚动，并可以选择跳到不同的问题，而不是使用手风琴
浏览 0提问于2012-04-26得票数 1
回答已采纳
3回答
我使用jquery代码在div上滚动时显示/隐藏元素。在所有浏览器中，它都能工作，但在IE中，它只在我滚动一些文本时才能工作，而不是整个div。因此，在本例中，如果我滚动主div的显示文本部分，则隐藏文本div将显示。但是，如果我鼠标进入两个浮动div之间的空格(其
浏览 1提问于2010-08-23得票数 1
回答已采纳
我试图在向下滚动1500px后显示div，并且我想在页面滚动到90%时隐藏div (所以，几乎在页面末尾)。 position: fixed; height: auto;
max-height:
浏览 12提问于2017-08-18得票数 1
回答已采纳
我想要一个div (一个菜单)在用户滚动时出现，然后在短暂的时间后淡出，这样它就不会干扰阅读，然后再次出现，如果用户滚动。到目前为止，以下代码完成了这项工作，但我希望当div出现时有一个fadein效果。").css("display","block").delay(5000).fadeOut("slow");</script>
浏览 0提问于2017-01-11得票数 1
4回答
我试图使一个固定的div出现后，用户滚动100px的页面，并再次消失时，滚动超过100px的顶部。我很乐意听到有解决方案的人的意见。
谢谢！:)
浏览 0提问于2011-06-25得票数 0
回答已采纳
我试图添加一个位置固定到一个div后，100px从页面顶部向下滚动，并位置相对，如果小于100px已经滚动。{ position: "relative" }</script>
我只能使用Mootools或纯JS，不能使用jQuery
浏览 1提问于2013-06-13得票数 1
回答已采纳
2回答
防止div扩展滚动条
、、、
以下面的示例为例：$("div").animate({top: '3000px'}, 6000);
您可以看到滚动条是如何变化的，我们现在有一个更大的页面要滚动。现在，我希望用户能够向下滚动到"Hello!“文本，如果文本超出用户的屏幕。但是，我不希望<e
浏览 2提问于2016-05-23得票数 1
回答已采纳
我很难让一个覆盖图出现在另一个div的可见部分之上。问题是，容器div溢出了，如果用户在该div内滚动，覆盖将不会覆盖滚动的部分。我的问题是:如何使用jQuery定位一个div来填充另一个div的可见部分--或者，有没有办法只使用CSS就能做到这一点？，下面是标记：<div class="contai
浏览 0提问于2013-01-04得票数 1
我正在设置一个动画，这样当用户滚动时，在10 an之后，菜单就会消失在左边(到目前为止已经很简单了)。我想要它，所以菜单容器显示‘固定’垂直，而它滚动水平向左。我想，如果我创建一个循环，为每个px滚动的容器添加1 px填充底部，这将产生这种效果(我不能使用位置:固定；因为这将阻止水平动画)。我已经设置了动画，所以它在滚动上触发，但在如何递增地增加填充值方面，我似乎毫无进展。
到目前为止，代码片段<e
浏览 2提问于2017-03-30得票数 0
回答已采纳
6回答
我正在尝试实现一个滚动函数，它根据用户滚动的位置移动元素，这段代码目前为止是工作的，它确实会移动元素。问题是，我希望有一个不同函数的列表，每当您根据某个div的id或类滚动某个div时，它就会移动特定的元素。我想如果我改变了$("#pagelight2").scrollTop()，它会起作用，但这没有帮助。更新后的代码可以工作，但是每当我向上滚动动画停止移动时，它真的会出现故障--
浏览 16提问于2014-11-18得票数 4
回答已采纳
3回答
我有以下文件比较代码：
这样我就可以比较我的文件了，但是我有一个问题:只有当我向下滚动时，底部的滚动条才是可访问的我如何使它们浮动或将滚动条移动到另一个div，这样就不需要一直向下滚动到另一个div来访问它们了？
浏览 11提问于2012-08-20得票数 17
回答已采纳
我需要滚动条留在底部，除非用户向上滚动，如果用户向上滚动，他们应该留在他们所在的地方，除非他们向下滚动并锁定回滚动。我相信这叫做“粘性卷轴”。
我写的Javascript并没有保留原来的高度。控制台显示，var oldHeight = (out.scrollHeight - out.clientHeight);是问题所在，但它应该工作得很好。
浏览 31提问于2018-10-21得票数 0
回答已采纳
3回答
我使用JQuery过滤一个table (在不匹配的行上调用tr.hide() )。table驻留在可滚动的div中。问题:不幸的是，在过滤列表时，用户每次都会失去滚动位置。有没有干净的方法
或者，如果该行不再可见，则滚动到最近的邻接行(上或下
浏览 4提问于2016-10-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
