javascript - 向下滚动时淡化文本+图标。再次出现在顶部

Question

我正在尝试创建某种信息“向下滚动”按钮(不可点击)，当滚动条在顶部时必须可见，向下滚动几个像素时淡出，再次向上时淡入.

到目前为止，我已经能够创建箭头和消息以及淡入淡出的部分。

这是一个 fiddle :https://jsfiddle.net/8b3jL7r0/1/

var btn = $("#button");

$(window).scroll(function() {
  if ($(window).scrollTop() < 100) {
    btn.addClass("show");
  } else {
    btn.removeClass("show");
  }
});

var btn2 = $("#scrolltxt");

$(window).scroll(function() {
  if ($(window).scrollTop() < 100) {
    btn2.addClass("showx");
  } else {
    btn2.removeClass("showx");
  }
});

1. 问题是箭头和信息文本“向下滚动”并没有从一开始就出现，您必须向下滚动一点，以便它们出现在顶部，然后一切正常。有什么线索可以让它们从第一次加载代码时就可见吗？

2. 知道如何将所有这些代码转移到 WordPress 中的一个代码模块中，并让它像在 fiddle 中一样工作吗？因为我尝试插入它但它似乎根本不起作用，所以页面上没有显示任何内容，既没有箭头也没有信息文本。

Answer 1

我刚刚将初始类添加到两个元素:

https://jsfiddle.net/4e2cafju/

<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>

对于 2:

您应该能够将这些元素直接放入模板中。您应该能够将 css 添加到样式表。你可以链接到外部 JS 文件。这可能是最佳做法。您也可以将所有代码放在一个页面中。我不确定您的 wordpress 安装/主题是如何设置的。