Question

我正在使用bootstrap选项卡，在里面我有一个名为img-parallax的类和一个h1元素的div。之后我有了一个名为content的类。“

我所做的是在img-parallax类和h1上创建一个视差效果，然后使用一个名为ScrollBanner的函数在它上面移动内容。

问题是这个效果只适用于第一个标签，如果我切换到第二个标签它不起作用。 甚至使用javascript代码选择类。

我实现它的唯一方法是复制执行视差效果的函数并使用另一个类img-parallax2.

我已经尝试过：

将班级更改为id。
使用逗号在javascript函数中选择多个类，如下所示：

var headerText = document.querySelector('.img-paralax, .imgparalax2');
将document.querySelector更改为document.querySelectorAll，但它也没有效果。

它没有用。

我不想使用重复的功能，我想为使用类.img-paralax.的每个元素使用一个

Here 是所有使用javascript函数重复的代码：

示例html代码：

<div class="img-paralax">
  <h1>Sample Title</h1>
</div>
<div class="content">
 <p>Content Here</p>
</div>

css：

.img-paralax {
  background-image: url('https://placehold.it/1920x1080.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  position: fixed;
  height: 500px;
}

.img-paralax h1 {
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
  font-family: 'Arial';
  letter-spacing: 20px;
  font-size: 50px;
  font-weight: 900;
  padding: 0;
  line-height: 452px;
  margin: 48px 0px 0px;
  text-transform: uppercase;
}
.content {
  position: relative;
  top: 500px;
  padding: 10px 20px;
  background: #fff;
  height: 1500px;
}

和javascript：

function scrollBanner() {
  var scrollPos;
  var headerText = document.querySelector('.img-paralax');
  scrollPos = window.scrollY;

  if (scrollPos <= 400) {
      headerText.style.transform =  "translateY(" + (-scrollPos/3) +"px" + ")";
  }
}

window.addEventListener('scroll', scrollBanner);

function scrollBannerText() {
  var scrollPosText;
  var headerTextH1 = document.querySelector('.img-paralax h1');
  scrollPosText = window.scrollY;

  if (scrollPosText <= 400) {
      headerTextH1.style.transform =  "translateY(" + (-scrollPosText/3) +"px" + ")";
      headerTextH1.style.opacity = 1 - (scrollPosText/400);
  }
}

window.addEventListener('scroll', scrollBannerText);

Answer 1

您确实需要使用enum Sign // ASCII codes { Mod = 37, // '%' Mul = 42, // '*' Add = 43, // '+' Sub = 45, // '-' Div = 47 // '/' } static class SignExtension { public static Char ToChar(this Sign s) { return (s as IConvertible).ToChar(null); } } class MainClass { static void Main(String[] args) { Sign op = Sign.Add; Char c = op.ToChar(); // c == '+' String s1 = op.ToString(); // s1 == "Add" String s2 = c.ToString(); // s2 == "+" } }，但请记住，它返回querySelectorAll而不是单个节点。例如，您可以使用HTMLCollection迭代匹配选择器的所有节点。 Demo

Array.prototype.forEach

您实际上可以使用单个处理程序来完成工作

function scrollBanner() {
  var scrollPos = window.scrollY;

  if (scrollPos <= 400) {
     [].forEach.call(
        document.querySelectorAll('.img-paralax, .img-paralax2'),
        function(node) {
          node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
        }
    );
  }
}

如何将javascript应用于多个班级？

1 个答案: