随机添加类两个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

这里是您的解决方案：

// 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); 
 

 
});

.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 2

这是一个比一个答案多的黑客。

你加padding-left:50%到.black，你给.red更高z-index值以补偿position设置的差异。

终于我加了body {overflow:hidden} - 身体正好是这种情况下的容器 - 整理一些东西。

// 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); 
 
});

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 
 
}

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

Answer 3

，应避免在这种情况下，绝对定位，因为你不想在这里重叠（这是不恰当的在这里）。您可以替换您的CSS和JavaScript代码，以便将单个类应用于反向。演示：

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

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; 
 
}

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