代码之家 › 专栏 › 技术社区 › Jaquarh

如何在jquery中fadein元素到达容器滚动顶部?

html jquery javascript

Jaquarh · 技术社区 · 5 年前

我正在努力 fadeIn() 当用户向下滚动页面时,我的所有元素。当 scrollTop() 文件到达 SCROLLTP() 元素的,元素应该显示。

$(document).ready(function() {
  $(this).scroll(function() {
    let pos = $(this).scrollTop();
    $('.full-height').each(function() {
      if (pos > $(this).scrollTop()) {
        $(this).closest('inner').fadeIn();
      }
    });
  });
});

.full-height {
  height: 100vh;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
}

.inner {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Foo
  </div>
</div>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Bar
  </div>
</div>

但是,我当前的代码根本不起作用。因为我有多个容器,所以我尝试使用 each() 方法在这些多个容器中分别检查 SCROLLTP() .

当滚动条到达元素顶部时,如何显示内部元素?

1 回复 | 直到 5 年前

Taplar 5 年前

几个问题。

如果滚动主页面,则绑定到窗口
得到 offset().top 获取元素在页面下方的距离
.inner 是的孩子 .full-height ,不是父级,因此使用 find()
你的 inner 选择器不正确。使用 内部 上课

$(document).ready(function() {
  $(window).scroll(function() {
    let pos = $(this).scrollTop();
    $('.full-height').each(function() {
      if (pos > $(this).offset().top) {
        $(this).find('.inner').fadeIn();
      }
    });
  });
});

.full-height {
  height: 100vh;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
}

.inner {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Foo
  </div>
</div>
<div class="flex-center position-ref full-height">
  <div class='inner'>
    Bar
  </div>
</div>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前