Question

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

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位于视口高度的120％处。因此，如果视口高度为1080px，则div将具有前1296px。

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

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

所以当div显示时你无法看到它，因为它已经滚动了。但它仍然可以获得淡入淡出，所以当你向后滚动时，你可以在它获得fadeOut agian之前看到它。

你应该改变你对此的看法：

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

这样，您可以检查当前滚动是否大于视口高度 - pxFromBottom。一旦你向下滚动，你的div就会消失。

小提琴 - https://fiddle.jshell.net/jgthb6m2/5/

Answer 2

我不确定您的问题是什么，但如果文本需要在加载时隐藏，请执行以下操作：

    $( document ).ready(function() {
      $('.scroll-btn').hide();
    });

Answer 3

计算问题。当滚动顶部到达文本时，下面的代码显示文本。我假设当你滚动到它应该出现的文本时，当你再次滚动到顶部时，文本应该会消失。

 if ($(window).scrollTop() > $('.scroll-btn').position('top')) {
    $('.scroll-btn').fadeIn('slow');
    console.log('fade in');
  } else {
   $('.scroll-btn').fadeOut('slow'); 
    console.log('fade out');
  }

在页面上显示文本之前隐藏文本的问题

3 个答案: