随机将类添加到两个div

Question

我有一个两列红色/黑色网格50/50％和高度100％并且有一个脚本可以在加载页面时随机化两者的外观，所以左或右。我改变了两列网格后面的代码，从相对位置开始，向右浮动到固定绝对位置。这必须要做，因为在移动时这种滚动行为这种方式更好。

下面的代码在使用浮动时工作正常，它会向左或向右添加一个类，使红色边选择一个随机边，黑色自动跟随，因为它是相对于彼此的。使用绝对和固定位置更改，它必须向左侧或右侧添加一个类才能工作。有人知道如何添加这个，所以当剩下红色时，黑色是正确的，反之亦然。

// Random red & black //

window.addEventListener('load', function() {
  // This is a ternary operator, which is just a shorthand way to 
  // do an if/else statement. This basically says, if the random number
  // is less than .5, assign "left" to the scenario variable.
  // if it is greater (or equal to), assign "right" to the variable. 
  var scenario = Math.random() < .5 ? "left" : "right";

  document.querySelector(".red", ).classList.add("" + scenario);
});

.left {
  left: 0;
}

.right {
  right: 0;
}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
}

.red {
  position: fixed;
  background-color: red;
}

<div class="red"></div>
<div class="black"></div>

Answer 1

以下是您的解决方案：

＆＃13;

＆＃13;

// Random red & black //

window.addEventListener('load', function() {
// This is a ternary operator, which is just a shorthand way to 
// do an if/else statement. This basically says, if the random number
// is less than .5, assign "left" to the scenario variable.
// if it is greater (or equal to), assign "right" to the variable.
var scenario = Math.random() < .5 ? "left" : "right";
var scenario2 = scenario == "left" ? "right" : "left";

document.querySelector(".red", ).classList.add("" + scenario);
document.querySelector(".black", ).classList.add("" + scenario2);

});

＆＃13;

.left { left: 0;}
.right { right: 0;}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
}

.red {
  position: fixed;
  background-color: red;
}

＆＃13;

<div class="red"></div>
<div class="black"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这种情况下你应该避免绝对定位，因为你不想在这里重叠（这里不合适）。您可以替换CSS和JavaScript代码，只是为了应用单个类进行反转。演示：

＆＃13;

＆＃13;

// Random red & black
window.addEventListener('load', function() {
  if (Math.random() < .5)
    document.body.classList.add("reversed");
});

＆＃13;

body {
  margin: 0;
  /* set height to be minimum of 100% of screen hieght */
  min-height: 100vh;
}

body > div {
  width: 50%;
}

.red {
  background-color: red;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
}

.black {
  background-color: black;
  margin-left: 50%;
  min-height: 100vh;
}

body.reversed > .red {
  left: 50%;
}

body.reversed > .black {
  margin-left: 0;
}

＆＃13;

<div class="red"></div>
<div class="black"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这更像是 hack 而不是答案。

您将padding-left:50%添加到.black，并为.red提供更高的z-index值，以弥补position设置的差异。

最后我添加了body {overflow:hidden} - 正好是这个案例中的容器 - 整理一下。

＆＃13;

＆＃13;

// Random red & black //

window.addEventListener('load', function() {
  // This is a ternary operator, which is just a shorthand way to 
  // do an if/else statement. This basically says, if the random number
  // is less than .5, assign "left" to the scenario variable.
  // if it is greater (or equal to), assign "right" to the variable. 
  var scenario = Math.random() < .5 ? "left" : "right";

  document.querySelector(".red", ).classList.add("" + scenario);
});

＆＃13;

body {
  margin: 0 auto;
  padding: 0;
  overflow: hidden
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
  padding-left: 50%
}

.red {
  position: fixed;
  background-color: red;
  z-index: 2
}

＆＃13;

<div class="red"></div>
<div class="black"></div>

＆＃13;

＆＃13;

＆＃13;