I hope you are well despite the actual circumstances.
My question : I add an event on the window scroll of my page ( I ask to change css property of an element to a specific height). The matter is that i also put a Youtube iframe in that page. So when the scroll reaches the iframe, it scrolls in the iframe window and my event dont work at this point. Is it possible to avoid the iframe to allow scroll ?
Sorry for my broken english... Have a good day !
Js code :
var iframe = $('iframe')
console.log(iframe.contentWindow)
var reserver = $("#reserverFixe");
var socials = $("#socialsMain");
var reserverCollapseHeight = 223;
var socialsCollapseHeight = 139;
var bothCollapseHeight = 337;
var reserverCollapseHeightMobile = 65 ;
var socialsCollapseHeightMobile = 100;
var bothCollapseHeightMobile = 255;
const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if ($('body').scrollY >= bothCollapseHeightMobile) {
socials.addClass("fixeVisibilityHidden")
reserver.addClass("fixeVisibilityHidden")
};
window.addEventListener('scroll', function(e) {
if (vw < 960 ){
if (window.scrollY >= reserverCollapseHeightMobile) {
reserver.addClass("fixeCollapsed")
}
else { reserver.removeClass("fixeCollapsed")};
if (window.scrollY >= socialsCollapseHeightMobile) {
socials.addClass("fixeCollapsed")
}
else { socials.removeClass("fixeCollapsed")};
if (window.scrollY >= bothCollapseHeightMobile) {
socials.addClass("fixeVisibilityHidden")
reserver.addClass("fixeVisibilityHidden")
}
else {
socials.removeClass("fixeVisibilityHidden")
reserver.removeClass("fixeVisibilityHidden")
}
}
else {
if (window.scrollY >= reserverCollapseHeight) {
reserver.addClass("fixeCollapsed")
}
else { reserver.removeClass("fixeCollapsed")};
if (window.scrollY >= socialsCollapseHeight) {
socials.addClass("fixeCollapsed")
}
else { socials.removeClass("fixeCollapsed")};
if (window.scrollY >= bothCollapseHeight) {
socials.addClass("fixeVisibilityHidden")
reserver.addClass("fixeVisibilityHidden")
}
else {
socials.removeClass("fixeVisibilityHidden")
reserver.removeClass("fixeVisibilityHidden")
}
}
});
And CSS :
margin: auto;
height: 300px;
margin-top: -153px;
width: 500px;
display: block;
}