繁体   English   中英

当我滚动到某个部分的某个部分时,某些元素不会消失

Certain element won't fade in when I scroll past a certain portion of a section

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我的代码有一点问题。

如您所见,我的示例分为三个部分。 更确切地landing-pagesectionabout 对于最后两个,我使用CSS grid将它们分成两个小节。

我正在尝试使用jquery实现滚动transition 就像,当我滚动超过1/3的section ,我的left元素开始从opacity:0消失。 这应该分别在我的about部分中的我right元素上发生,但是在我的代码中,当我滚动超过section的1/3时,就会发生这种情况。

我试图将我的right.hidden的类更改为right.hide ,它完全消失了。

波纹管我已经附上了我的代码,这是我的CodePen的链接

.landing-page
.section
  .left.hidden
  .right
.about
  .left
  .right.hidden 

萨斯

.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section
  height: 100vh
  width: 100vw
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-template-areas: 'left right' 'left right'
  .left
    grid-area: left
    background: orangered
    transition: 2000ms
  .left.hidden
    opacity: 0
  .right
    grid-area: right
    background: lightblue
.about
  height: 100vh
  width: 100vw
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-template-areas: 'left right' 'left right'
  .left
    grid-area: left
    background: lightgreen
  .right
    grid-area: right
    background: orangered
    transition: 2000ms
  .right.hidden
    opacity: 0

jQuery的

$(document).ready(function() {
  var sectionLeftEl = $('.left'),
      sectionRightEl = $('.right'),
      sectionLeftElOffset = sectionLeftEl.offset().top / 3,
      sectionRightElOffset = sectionRightEl.offset().top / 3,
      documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > sectionLeftElOffset && sectionLeftEl.hasClass('hidden')) sectionLeftEl.removeClass('hidden');
    if (documentEl.scrollTop() > sectionRightElOffset && sectionRightEl.hasClass('hidden') sectionRightEl.removeClass('hidden');

  });
});
1 个回复

如果我理解正确,则计算错误(@Temani Afif提及的选择器问题)。

断面偏移量(右或左)应为

sectionTopOffset-2/3 * sectionHeight

试想(或测试)开始滚动时,您可以看到.section的顶部。 因此,您希望每当超出.section的1/3时,就想说2 / 3 * .section.height()

所以:

 $(document).ready(function() { var sectionLeftEl = $('.section .left'), sectionRightEl = $('.about .right'), sectionLeftElOffset = sectionLeftEl.offset().top - (2 * sectionLeftEl.height() / 3), sectionRightElOffset = sectionRightEl.offset().top - (2 * sectionRightEl.height() / 3), documentEl = $(document); documentEl.on('scroll', function() { if (documentEl.scrollTop() > sectionLeftElOffset && sectionLeftEl.hasClass('hidden')) sectionLeftEl.removeClass('hidden'); if (documentEl.scrollTop() > sectionRightElOffset && sectionRightEl.hasClass('hidden')) sectionRightEl.removeClass('hidden'); }); }); 
 .landing-page { height: 100vh; width: 100vw; background: gray; } .section { height: 100vh; width: 100vw; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "left right" "left right"; } .section .left { grid-area: left; background: orangered; transition: 2000ms; } .section .left.hidden { opacity: 0; } .section .right { grid-area: right; background: lightblue; } .about { height: 100vh; width: 100vw; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "left right" "left right"; } .about .left { grid-area: left; background: lightgreen; } .about .right { grid-area: right; background: orangered; transition: 2000ms; } .about .right.hidden { opacity: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="landing-page"></div> <div class="section"> <div class="left hidden"></div> <div class="right"></div> </div> <div class="about"> <div class="left"></div> <div class="right hidden"></div> </div> 

https://codepen.io/moshfeu/pen/jxmYyp?editors=0010

2 滚动到部分时更改 URL

我正在使用这个模板,我想在滚动到部分时更改 URL。 我看到了这个答案,我尝试更新如下所示的代码,但没有成功: body { background-color: #ECECEC; color: #444444; padding: 0; margin: 0; perspective: ...

3 滚动到该部分时将执行功能

我有这些代码可以在textarea占位符中制作键入脚本,它可以正常工作,但是当我滚动到div表单时,我需要执行typeIt函数。 var txt =“滚动到该部分时将执行功能”; varmodified_txt =“”; ...

6 只希望在用户滚动到该部分时呈现元素

我的网站上有这个动画图表,你必须向下滚动一点才能到达。 动画总是立即发生,这意味着没有人可以看到它实际上正在制作,因为他们还没有向下滚动。 我想知道是否有任何方法可以使该元素仅在用户滚动到屏幕的该部分时出现? ...

2020-07-14 22:08:28 1 34   reactjs
7 当我只想滚动一个部分时,整个页面都会滚动

我希望有人能帮我解决这个问题......我正在撕我的头发。 我想创建一些水平滚动的部分。 我查看了 Netflix 的代码来对此进行建模,我终于让溢出一直流到浏览器窗口的边缘,并且行的开头和结尾都与页面上的边距对齐。 但是现在当我滚动时,整个页面都会滚动。 如何让这个部分独立滚动,同时仍然让溢出到 ...

2021-02-27 20:16:53 1 31   html/ css
8 滚动到相应部分时无法添加类或样式

我有一个菜单,我在其中添加了这样的链接 现在,我将转到添加了这样的 ID 的部分: 现在,当我点击链接后转到该部分时,我想使用 JavaScript添加一个类名。 因此,为此我使用以下 JS 代码: 但它显示的错误是: 未捕获的类型错误:hash.addClass 不是函数 所以 ...

9 当页面滚动到该部分时触发js动画

我正在使用rendro( https://rendro.github.io/easy-pie-chart/ )的简单饼图插件。 基本上,我只希望动画在滚动到显示图表的页面上的特定区域时才发生。 我该如何实现? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM