javascript - 在页面上出现滚动之前隐藏文本的问题

Question

晚上好， 我在加载页面时隐藏文本时遇到问题，它应该在我向下滚动页面后出现。但它是可见的，当我达到设定点时，它消失并立即再次出现。当我再次滚动到顶部时，它终于消失了。 当我尝试使用 display: none; 或 visibility: hide; 隐藏它时，它甚至不会出现。 我应该在代码中更改什么？ 感谢您的帮助!

JS:

$(window).scroll(function() {
  var pxFromBottom = 350;

  if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
    $('.scroll-btn').fadeIn('slow')  
  } else {
    $('.scroll-btn').fadeOut('slow');     
  }

});

CSS:

html { height:2000px; background-color: #666; }

HTML:

<div style="position:absolute; top: 120%;" class="scroll-btn"> my content to show </div>

Answer 1

第一次向下滚动时，当代码第一次隐藏 div 时，它不会“淡入”然后“淡出”。 只是淡出。 解决这个问题，

添加到div样式

display:none;

这样你向下滚动时就看不到 div 了。

但这东西只能解决一个问题。

您的 div 放置在视口(viewport)高度的 120% 处。因此，如果视口(viewport)高度为 1080px，则 div 的顶部将为 1296px。

但是在你的js代码中，你检查

if $(window).scrolltop + $(window).height > $(document).height() - pxFromBottom)

因此，当 div 显示时，您看不到它，因为它已经滚动了。 但它仍然会淡入，因此当您向后滚动时，您可以在再次淡出之前看到它。

您应该将 if 语句更改为:

if (($(window).scrollTop()) > ($(window).height() - pxFromBottom)) 

通过这种方式，您可以检查当前滚动是否大于视口(viewport)高度 - pxFromBottom。 一旦向下滚动，div 就会淡入。

fiddle - https://fiddle.jshell.net/jgthb6m2/5/