我正在构建一些测试分屏布局，并希望根据滚动位置显示/隐藏内容。因为我已经在VH中构建了布局，所以在VH也设置了滚动位置？(虽然我在切换文本，但我想学习如何按类/id显示和隐藏，这样我将来就可以切换其他内容。
这是代码笔
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y < 0) {
$(".test1").hide();
} else {
$(".test1").show();
}
});
$(function() {
var element =$("#it");
var element1 =$("#it1");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
element.hide();
element1.show();
} else {
element.show();
element1.hide();
}
});
})<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body style="height :2000px;">
<div id="it" style="background-color:red;height :1000px;">TEST</div>
<div id="it" style="background-color:yellow;height :1000px;">TEST2</div>
</body>
</html>