网页中如何让DIV在网页滚动到特定位置时出现

Posted 2023-03-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页中如何让DIV在网页滚动到特定位置时出现相关的知识，希望对你有一定的参考价值。

我的网页中有个DIV，但是我不想让他在页头出现，如何实现在滚动条滚动到特定位置时才出现？

用js或者jquery比较好实现。
但你要知道，滚动到哪个特定位置，例如滚动到一个标题h3那显示这个div，那么可以用jquery算这个h3距离网页顶部的距离：$("h3").offset().top，这个值有了后，还要算滚动条的距离$(this).scrollTop()。第一个值是不会吧的，主要是第二个值是不断在变，所以要写到滚动方法里：$(window).scroll()。
大概整个代码是
$(function()
var h3_height = $("h3").offset().top;

$(window).scroll(function()
var this_scrollTop = $(this).scrollTop();
if(this_scrollTop>h3_height )
$("div").show();

);
);

最终代码不一定是我这样，但希望你了解整个的思路。参考技术A 用js或者jquery比较好实现。
但你要知道，滚动到哪个特定位置，例如滚动到一个标题h3那显示这个div，那么可以用jquery算这个h3距离网页顶部的距离：$("h3").offset().top，这个值有了后，还要算滚动条的距离$(this).scrollTop()。第一个值是不会吧的，主要是第二个值是不断在变，所以要写到滚动方法里：$(window).scroll()。
大概整个代码是
$(function()
var h3_height = $("h3").offset().top;

$(window).scroll(function()
var this_scrollTop = $(this).scrollTop();
if(this_scrollTop>h3_height )
$("div").show();

);
);

如何让DIV固定在页面而不随着滚动条随意滚动

参考技术A 可以用position的fixed属性，这个属性的功能就是使元素的定位方式为固定的，这样就可以让div不随滚动条滚动而改变位置。
下面举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
#cen

position: fixed;
left: 10px;
top:100px;
width: 100px;
height: 100px;
background-color: aqua;

</style>
</head>
<body>
<div id="cen"></div>
 
 
 
 
 
 
 
 
 
</body>
</html>

以上是关于网页中如何让DIV在网页滚动到特定位置时出现的主要内容，如果未能解决你的问题，请参考以下文章

设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div,小于30

滚动网页时出现水波浪纹怎么办

如何让jquery动画效果在屏幕滚动到指定位置才执行

css div 固定一个div 使这个div不随着网页的滚而滚动就是把这个div固定在一个位置任何时候都在一个位置

打开网页时出现403Forbidden是啥意思

如何让DIV固定在页面而不随着滚动条随意滚动