- Iframe is created through simple custom HTML placed in an Panel and we made panel as floater using Inline CSS and Click Event. So by default when page loads we have gap in the scroll, Highlighted in yellow on below image. If I remove Iframe, scroll gap will disappears. How to remove that gap with Iframe included.
Inline CSS
.sticky {
position: fixed;
top: 0;
width: 99%;
z-index:100;
}
.nonSticky {
position: initial;
}
Event
window.onscroll = function() {setStickyHeader()};
var header=this.ui.get("collapsePanelMC");
var sticky = header._instance.panel.offsetTop;
var stickyView = this.context.options.stickyView.get("value");
header._instance.panelBody.style.display = "none";
function setStickyHeader() {
if(stickyView){
if (window.pageYOffset > sticky) {
header.addClass("sticky","nonSticky");
header._instance.panelBody.style.display = "none";
header.setIcon("angle-left");
header.setTitle("MESSAGE CENTER");
}else {
header.addClass("nonSticky","sticky");
header._instance.panelBody.style.display = "none";
header.setIcon("angle-left");
header.setTitle("MESSAGE CENTER");
}
}
}
this.setVisibility = function(){
if(this.context.options.display.get("value")){
this.ui.get("collapsePanelMC")._instance.panelBody.style.display = "";
this.ui.get("collapsePanelMC").setIcon("angle-down");
this.context.options.display.set("value", false);
this.ui.get("collapsePanelMC").setTitle("MESSAGE CENTER");
}else{
this.ui.get("collapsePanelMC")._instance.panelBody.style.display = "none";
this.ui.get("collapsePanelMC").setIcon("angle-left");
this.context.options.display.set("value", true);
this.ui.get("collapsePanelMC").setTitle("MESSAGE CENTER");
}
}
------------------------------
Kathy Bazinet
North America z Sytems DevOps and Digital Transformation Technical Sales Manager
IBM
Hartford CT
860-888-9921
------------------------------