am trying to add sticky tag to side Divs and am calling javascript for this, when am calling the function more than once in the same page only 1 div is affected and when i tried to make it 2 different functions for 2 different Divs is only calling the last function and skipping the other
<script>
window.onscroll = function() {
myFunctionR();
myFunctionL();
}
var header = document.getElementById("stickDivL");
var header = document.getElementById("stickDivR");
var sticky = header.offsetTop;
function myFunctionL() {
var scrollDivL = window.pageYOffset;
if (scrollDivL > sticky) {
header.classList.add("sticky");
header.classList.add("col-xl-3");
header.classList.remove("col-xl-12");
} else {
header.classList.remove("sticky");
header.classList.remove("col-xl-3");
header.classList.add("col-xl-12");
}
};
function myFunctionR() {
var scrollDivR = window.pageYOffset;
if (scrollDivR > sticky) {
header.classList.add("sticky");
header.classList.add("col-xl-3");
header.classList.remove("col-xl-12");
} else {
header.classList.remove("sticky");
header.classList.remove("col-xl-3");
header.classList.add("col-xl-12");
}
};
</script>
You're assigning both values to only 1 variable try this
var header0 = document.getElementById("stickDivL");
var header1 = document.getElementById("stickDivR");
it happens because when you call var header = document.getElementById("stickDivR"); you're overwriting the variable.
like
var Foo1 = 1
var Foo1 = 10
console.log(Foo1)
you'll see 10