隨機添加類兩個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>