时间戳

首页 > 解决方案 > 使用 vh 或 % 显示和隐藏滚动内容？

javascript - 使用 vh 或 % 显示和隐藏滚动内容？

问题描述

我正在构建一些测试分屏布局，并希望根据滚动位置显示/隐藏内容。因为我已经在 VH 中建立了布局，所以也在 VH 中设置了滚动位置？（虽然我正在切换文本，但我想学习如何按类/ID 显示和隐藏，以便将来切换其他内容。

这是代码笔

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y < 0) {
        $(".test1").hide();
    } else {
        $(".test1").show();
    }
});

标签： javascripthtmlcssscroll

解决方案

$(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>

推荐阅读