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

Issue with hiding text on page before it appears onScroll

本文关键字：文本 隐藏 问题 显示 Scroll      更新时间：2023-09-26

晚上好，我在加载时在页面上隐藏文本时遇到问题，它应该在我向下滚动页面后出现。但它是可见的，当我到达设定点时，它消失了，然后立即再次出现。当我再次滚动到顶部时，它终于消失了。当我试图用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>

第一次向下滚动时，当代码第一次隐藏div时，它不会先"fadein"，然后"fadeout"。只是逐渐消失。解决这个问题，

添加到div样式

display:none;

这样，您就无法在scorling时看到div。

但这件事只解决了一个问题。

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

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

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

因此，当div显示时，您看不到它，因为它已经滚动了。但它仍然有渐变输入，所以当你向上滚动时，你可以在渐变输出之前看到它。

你应该把你的if雄蕊改成这样：

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

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

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

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

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

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

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