jquery - 滚动时如何隐藏和显示查看的父 block 内的元素-6ren

jquery - 滚动时如何隐藏和显示查看的父 block 内的元素

转载作者：太空宇宙更新时间：2023-11-04 10:50:04

我试图让元素仅在查看 block 中出现(就像现在在 div 中)，并且当滚动向下时，隐藏元素应该可见:隐藏格式。我在尝试应用它时失去了逻辑。请帮助我，如何做到这一点。

$('div').scroll( function(){
  $('ul li').each( function(i){
    var bottom_of_object = $(this).position().top + $(this).height(),
        bottom_of_window = $('div').scrollTop(),
        distance = $(this).offset().top;
       
    if($('div').scrollTop() >= distance){
      $(this).css({
             'opacity': '1',
             'visibility': 'visible',
        'text-shadow': 'none'
             })
    }
    if(bottom_of_window <= bottom_of_object){
      $(this).css({
             'opacity': '0',
             'visibility': 'hidden',
        
             })
    }
   }); 
 });

div {
  height: 420px;
  overflow: auto;
  margin: 100px auto;
  width:600px;
  border: 1px solid black
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}
ul li {
  flex: 1 45%;
  height: 200px;
  border: 1px solid red;
  display: inline-block;
  background: green;
  visibility: hidden;
  opacity: 0;
  transition: 500ms
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='text'></span>   
<div>
<ul>
  <li></li>
  <li></li> 
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</div>

最佳答案

以下是您可以执行的操作:

$(document).ready(function(){
     var divTop = $('div').offset().top;
     var viewPort = $('div').height();
     $('div').scroll( function(){
        $('li').each(function(){
            var liTop = $(this).offset().top;
            if(liTop <= viewPort && liTop >= -30){
                $(this).css({
                    'opacity': '1',
                    'visibility': 'visible',
                    'text-shadow': 'none'
                });
            } else {
                $(this).css({
                    'opacity': '0',
                    'visibility': 'hidden',
                })
            }
        });
     });
});

这应该按预期工作。

工作演示:Here

关于jquery - 滚动时如何隐藏和显示查看的父 block 内的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35060887/

文章推荐： linux - bash 从原始文件中提取路径复制文件

文章推荐： javascript - 我的插件无法识别 Bootstrap 和 css

文章推荐：找不到 Python Mechanize 模块

ios - 自定义动画过渡 - 查看/查看
我有一个用 Swift 编写的自定义转换，当呈现的 View 从侧面进入时，被关闭的 View 消失。现在我想要同样的效果，但我希望呈现的 View 从顶部进入，而被取消的 View 从底部出来。
android - DataBindingUtil findBinding(查看 View )与 getBinding(查看 View )
该方法的预期目的是什么 findBinding(View view) ？我一直在使用数据绑定(bind)库测试版。目前还没有针对各个类的官方引用文档，所以我一直在查看源代码以了解我们可以访问哪些方
rust - 查看 `for` 循环内的迭代器
我试图在遍历 &str 时查看当前位置前面的字符。 let myStr = "12345"; let mut iter = myStr.chars().peekable(); for c in ite
azure - 查看/更改Azure函数应用程序的底层存储
每当我在 Azure 中创建新的 Azure 函数应用时，我都会选择一个存储帐户供其使用。创建应用后，如何查看/更改存储帐户？我尝试在门户中浏览，但无法看到可以在哪里配置它。最佳答案创建后，您
qt - 查看 QTextStream
我想查看读取 QFile 的 QTextStream 的下一个字符，以创建一个高效的标记器。但是，我没有找到任何令人满意的解决方案。 QFile f("test.txt"); f.open(QIOD
java - 旋转手机取消选择列表中的项目查看
当我旋转手机时， ListView 中选定的项目将被取消选择。这是我的适配器。我只想更改所选项目的颜色(仅是单个选择)，当我旋转手机时，我想查看我选择的内容。现在，当我旋转手机时，我看不到所选项目。
查看 'puts'返回值，然后呢？
我开始编写代码来检查函数的返回值，但我不确定在捕获到一些错误后如何继续。例如，在 fgets 中: while( fgets( rta, 3, stdin ) == NULL ) {
java - 可滚动弧形轮查看
是否可以获取或创建一个 optional 轮，它以假想的圆圈滚动而不是直接向下(垂直)滚动？直线链接但想要弯曲例如就像控件 here ，但车轮是弯曲的？最佳答案有没有可能你想要的是一个轮播？
查看 Mysql 错误但在正常查询中工作
当我尝试为其创建 View 时出现错误:“ View 的 SELECT 在 FROM 子句中包含一个子查询”，但它在普通查询中工作正常。我认为它与我的 WHERE 子句有关，但我不明白为什么或如何修复
c# - 查看/检索属性
在一个类中，我有以下代码: /// [System.Xml.Serialization.XmlElementAttribute("Errors", typeof(ErrorsType))] [Sys
android - 在屏幕上显示错误信息(查看)
我想显示来自 catch block 的错误(日志)消息。如何在单个屏幕上显示所有消息(堆栈)，以便用户了解？谢谢... 最佳答案使用 Toast 怎么样？示例: Toast.makeText(
ios - 查看 tableView
我有以下屏幕(图像)，当按下按钮时显示一个侧面菜单，菜单出现，另外我有一个 uitableview 来显示其他东西我的问题是，当侧边菜单出现时，uitableview 被调整了大小。如何保持 ui
javascript - 查看 'SeekBar'的render方法
invariant violation element type is invalid: expected a string (for built-in components) or a class/
c - 查看 execvp();
我是新手，正在尝试学习 fork() 和系统调用的功能，现在我正在使用 execvp() 来尝试制作 bash，但我遇到的问题是，当我编写正确的命令时，程序结束，我想循环使用我的 bash，直到有人在
php - 调用字符串上的成员函数 all()(查看 :
我正在尝试使用 Laravel request validation method 创建一个登录页面和凭据验证 -> 如果用户未通过身份验证，它将返回错误“密码错误....” 我在两种不同的情况下看
java - 查看.jar文件的内容
我有一个 .jar 文件，我需要查看 jar 文件的内容。是否有任何解码器可用于解码 jar 文件。我也有 solaris 环境，我需要知道什么是最佳答案使用jar命令行，即 jar tf j
查看 Git 提交中发生了什么变化
Git 提供了几种方式可以帮你快速查看提交中哪些文件被改变。如果你每天使用 Git，应该会提交不少改动。如果你每天和其他人在一个项目中使用 Git，假设每个人每天的提
tensorflow: 查看 tensor详细数值方法
问题 tensor详细数值不能直接print打印： ? 1
查看 MySQL 已经运行多长时间的方法
一，uptime 可以查看系统的运行时间 show global status like 'uptime'; 二，利用linux命令查看 Linux 下有个 uptime 可以查看系统的运行时
10、查看 XML 文件
在所有主流的浏览器中，均能够查看原始的 XML 文件不要指望 XML 文件会直接显示为 HTML 页面查看 XML 文件 <?xml version="1.0" e

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 滚动时如何隐藏和显示查看的父 block 内的元素