call a resize event - that is not reacting on scroll?

call a resize event - that is not reacting on scroll? - javascript

I want a div to have the min-height of the viewport.
Therefor I use Javascript to detect the window height and set a style property (because of mobile browser height behavior).
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
I want to resize the height in case of orientationchange or if the browser window changes.
So, I created a resize event.
And here is my problem - the resize event also gets fired when you scroll the page.
So there is this ugly jump in the content on scrolling down.
Does anyone have a solution for this problem?!
It bothers me so often :(
Edit - here is a simple example:
var vpHeight = window.innerHeight;
// set style property
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
// do the same on resize
window.addEventListener('resize', () => {
var vpHeight = window.innerHeight;
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
});
* {
margin:0;
padding:0;
}
body {
background-color:salmon;
}
#fullheight {
width:100%;
background-color:lavender;
display:block;
position:relative;
height:var(--vpHeight, 100vh);
}
#fullheight::after {
content:'';
position:absolute;
bottom:0;
left:50%;
margin-left:-25px;
width:50px;
height:50px;
background-color:black;
}
<div id="fullheight"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.</p>
<p>Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</p>

It is not that a resize event is being called on every scroll, but there is actually a resize on the user scrolling at first on some mobiles, or subsequently when they go back to the first page top - it's the tabs at the top of the browser window that come and go - the reason 100vh doesn't 'work' as one would expect. This was done in the mobile browsers to stop a jump effect when doing 'ordinary' scrolling, but of course in this case the layout is altered depending on actual screen size usable.
One slight mitigation is to make the height change transition so it's less of a jerky experience. It's still feeling a bit different from a normal scroll without height change, but is less of an annoyance I think.
(Note, the phenomenon isn't seen on an SO snippet, run this code in your browser on an actual device).
<style>
* {
margin:0;
padding:0;
}
body {
background-color:salmon;
}
#fullheight {
width:100%;
background-color:lavender;
display:block;
position:relative;
height:var(--vpHeight, 100vh);
transition: height 0.3s; /* ADDED */
}
#fullheight::after {
content:'';
position:absolute;
bottom:0;
left:50%;
margin-left:-25px;
width:50px;
height:50px;
background-color:black;
}
</style>
<div id="fullheight"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.</p>
<p>Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</p>
<script>
var vpHeight = window.innerHeight;
// set style property
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
// do the same on resize
window.addEventListener('resize', () => {
var vpHeight = window.innerHeight;
document.documentElement.style.setProperty('--vpHeight', `${vpHeight}px`);
});
</script>

Related

How to delete a div that meets another div

I would like to be able to hide a div that meets another in JavaScript.
I found this code but I can't adjust the distance between the red and green div. I need to put a lot of content between the green div and the red div.
In this code the red div disappears when it comes into contact with the green one
window.onscroll = function() {
cacherHeader()
};
var header = document.getElementById("header");
var essai = document.getElementById("essai");
var position_essai = essai.offsetTop;
function cacherHeader() {
if (window.pageYOffset <= position_essai) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
height: 200px;
padding-top: 20px;
}
#essai {
background-color: green;
}
#conteneur_02 {
height: 1500px;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">conteneur 1</div>
<div id="essai">Essai</div>
<div id="conteneur_02">conteneur 2</div>

The code you use has nothing to do with "two divs meeting". The #header disappears when the window.pageYOffset is greater than the offsetTop of the #essai.
This means that you can have any length content between the two - it just simply updates the value when the #header classes are toggled.
I updated the snippet: removed the values that set the height of the containers from the CSS - now they stretch with the content.
Also, added a function to get the current offsetTop of an element - otherwise the values would be recalculated only on page refresh and not on if the window width (thus the container widths) changes.
window.onscroll = function() {
cacherHeader()
};
function getOffsetTop(el) {
return el.offsetTop
}
const header = document.getElementById("header");
const essai = document.getElementById("essai");
function cacherHeader() {
if (window.pageYOffset <= getOffsetTop(essai)) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
padding-top: 20px;
}
#essai {
background-color: green;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>
<div id="essai">Essai</div>
<div id="conteneur_02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>

Side help which follows and collapses to a tab (JQuery/Bootstrap)

I am trying to add a help box at the right hand side of my page. I want it to stay in the same place as the user scrolls and I want it to collapse to a tab at the right hand side, when they close it.
A bit like this:
https://www.elated.com/articles/css3-floating-follow-tab-with-rollover-effects/
but it needs to expand and collapse.
I can't see any examples of how to do this anywhere.

I'm sure you'll find much better implementations of this, however this is one way to do it. I just threw it together, I would google around to find something that may be a bit better but this should give you an idea of how it could be done.
Note this is with a jquery library you could use vanilla javascript as well. In order to have something happen on click you will need to use javascript. If you want it to happen on hover this can be done with just css.
$(document).ready(function(){
$(document).on('click', "#helpbar span", function(){
if($(this).parent().hasClass('closed')){
$(this).parent().removeClass('closed').addClass('open');
$(this).find('p').text('CLOSE');
}else if($(this).parent().hasClass('open')){
$(this).parent().removeClass('open').addClass('closed');
$(this).find('p').text('HELP');
}
});
});
#content{width:400px;}
.closed{
width:0px;
}
.open{
width:200px;
}
#helpbar{
position: fixed;
right:0;
height:500px;
border:1px solid black;
top: 50px;
}
#helpbar span{
width:100px;
height: 100px;
margin-left:-100px;
border:1px solid black;
display:inline-block;
}
#helpbar span p{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare vel dui eget viverra. Aliquam ac hendrerit ex, pulvinar dictum nisl. Quisque vitae ullamcorper augue. Donec congue rhoncus augue, eu faucibus erat bibendum a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vehicula ex ut arcu convallis molestie. Nunc sed mi eget purus aliquet consectetur in eget ex. Cras commodo arcu augue. Duis at nulla ligula. Donec id erat non ante viverra sollicitudin sodales vitae velit. Mauris vitae fermentum nulla, eget laoreet erat. Donec in eleifend ligula. Phasellus in pretium enim. Vestibulum ultricies ligula arcu, sed faucibus risus vulputate vitae.
Integer ut erat magna. Sed imperdiet est vitae est rhoncus lacinia. Proin molestie tristique neque ut condimentum. Duis consectetur varius aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam at iaculis ipsum. Integer enim lacus, suscipit mollis consequat nec, lobortis sed magna. Cras ut ultricies arcu. Nulla aliquam magna nulla, ac venenatis nibh tincidunt in. Nulla tristique mauris orci, et sagittis dolor volutpat ut. Aliquam erat volutpat. Nam lectus magna, bibendum eu mauris in, lobortis dictum ipsum. Donec molestie imperdiet feugiat. Pellentesque consequat laoreet ipsum, ac rutrum nunc tempus sit amet. Integer et cursus ex.
Morbi suscipit vitae leo ut consectetur. Maecenas vehicula libero ante, et pharetra ligula varius sed. Integer in lacinia augue. Cras tincidunt justo metus, vitae laoreet orci sollicitudin et. Quisque eu lobortis nisi, vel congue purus. Maecenas malesuada feugiat euismod. Etiam eu justo sed orci semper elementum. Cras et enim gravida, cursus sapien in, consectetur ante. Praesent maximus semper convallis. Praesent sit amet massa sagittis, interdum elit pulvinar, varius erat. Vestibulum ornare, ex id porttitor luctus, odio turpis imperdiet lectus, ac vulputate ipsum metus a dolor. Curabitur et leo nunc. Quisque in nulla ac lectus tempor tempus in quis ipsum.
Cras turpis lectus, volutpat vitae hendrerit vel, sollicitudin sed massa. Suspendisse non sagittis turpis. Quisque a lacus quam. Aenean laoreet lorem at ante viverra viverra. Duis volutpat eros a lacus posuere, non faucibus massa ultrices. Ut imperdiet mi in neque porttitor finibus ac eget arcu. Aliquam quis pharetra nibh, non sagittis neque. Curabitur arcu mauris, euismod ut libero ac, facilisis malesuada sapien. Maecenas ex lectus, suscipit eget nulla molestie, placerat varius leo. Pellentesque eu sapien fringilla, blandit nisi hendrerit, lobortis nunc. Cras ac felis ullamcorper, suscipit metus nec, semper diam. Vivamus quis mauris eget metus condimentum luctus eu non est.
In viverra turpis lacus, id porttitor nibh aliquam euismod. Sed a massa dolor. Aliquam ut commodo quam. Mauris a rutrum quam, non convallis enim. Suspendisse non turpis ultrices, congue nisl eu, fringilla mauris. Donec sed libero felis. Morbi vel lorem nibh. Pellentesque vitae accumsan nisi. Vivamus ut nulla sapien. Donec at diam laoreet mauris gravida mollis. Nullam tortor ante, auctor dignissim molestie ut, tempor nec urna. Vestibulum suscipit ultrices turpis vel tristique. Curabitur fringilla magna vel tortor finibus, ac commodo ipsum accumsan. In rhoncus eleifend enim, eu malesuada ex laoreet ut. Integer elementum sem sed aliquet gravida. Aenean auctor a justo vel ultrices.
Proin accumsan, ex eget hendrerit sodales, urna leo auctor nunc, sed imperdiet tellus sem nec sem. Proin vitae enim ut ipsum blandit dapibus. Fusce tellus tortor, ultricies vel lobortis et, iaculis ut massa. Quisque ullamcorper nulla urna, sit amet sodales risus facilisis a. Nulla in augue at urna pulvinar iaculis a ut nibh. Mauris ornare magna et gravida mattis. Maecenas euismod semper dictum. Maecenas nec risus justo. Proin id iaculis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum vestibulum dui et pellentesque. Duis gravida risus rhoncus, dapibus orci a, finibus leo. Vestibulum maximus sagittis nibh non lacinia.
Nulla sodales odio at orci lobortis luctus. Nulla condimentum a libero at ullamcorper. Etiam in tincidunt ex. Donec non dolor nec augue tincidunt pretium vitae a odio. Aenean fringilla massa erat, in molestie mauris tincidunt eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tincidunt turpis eu justo condimentum fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce mi mauris, ullamcorper at euismod a, mattis et purus.
Proin pharetra arcu ut maximus condimentum. Nullam sit amet vestibulum massa, at vulputate ipsum. Curabitur pretium ultrices sem. Pellentesque ullamcorper orci quis nisi finibus posuere. Aliquam erat volutpat. Donec porttitor justo eget mi lobortis, iaculis gravida libero gravida. Donec in tempus nulla.
Curabitur suscipit ligula sit amet mi pharetra ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Duis quis lectus vitae arcu mattis fermentum at non lacus. Praesent ullamcorper nibh eu ante aliquam, sed fringilla tellus vehicula. Praesent ut mollis risus. Nullam nec dictum orci. Nullam egestas, erat eget vestibulum viverra, felis arcu facilisis massa, ac rutrum tortor est vel libero. Sed fermentum lacus sed massa pellentesque, a ornare orci interdum. Morbi in turpis risus. Donec ullamcorper, quam et blandit varius, quam lorem vulputate turpis, in viverra lectus tortor efficitur ipsum. Suspendisse dictum convallis est, quis bibendum dolor aliquam ut. Aenean hendrerit sapien fermentum dapibus gravida. Morbi eu pulvinar urna. Morbi scelerisque fermentum luctus. Sed ac tortor bibendum, pretium dui tempor, facilisis risus.
Mauris a lorem tristique, euismod lorem quis, varius risus. Donec bibendum nisi sit amet lorem auctor tempus. Nullam maximus erat quis lacus tristique, non aliquet neque semper. Aliquam erat volutpat. Duis elementum, dui in euismod fermentum, mi nisi suscipit erat, vel tincidunt neque felis id felis. Suspendisse tempor mi quam, sed posuere nisl fringilla vel. Mauris vitae diam vehicula urna feugiat facilisis cursus sed ligula. Cras iaculis luctus nisi, quis dictum lacus venenatis ut. Nulla facilisi. Phasellus sit amet lacus diam.
Duis sem libero, pellentesque sed porta hendrerit, elementum commodo dui. Suspendisse felis metus, semper at urna sed, egestas ullamcorper dolor. Fusce eleifend, libero nec euismod posuere, sapien dui maximus est, ut congue lacus diam sed mi. In vitae est sed augue sodales pharetra. Donec sit amet sem magna. Integer ultricies in leo ut mollis. Vestibulum mattis varius erat, sed tempus augue finibus et. Donec feugiat accumsan diam eu efficitur. Nulla eu enim nec urna vehicula vehicula ac euismod dolor. Ut lacinia elit eget aliquam laoreet. Nullam dapibus imperdiet sem et pharetra. Nulla sed quam id turpis porta varius. Mauris dictum a tortor cursus scelerisque. Morbi eu mattis ante. Vestibulum efficitur accumsan diam et ultricies. Nullam pharetra nulla ut augue gravida, sed tincidunt dolor porttitor.
Sed molestie, massa sed mattis tincidunt, sapien velit bibendum lorem, in feugiat risus dui eu mauris. Quisque iaculis laoreet tellus, eget fringilla neque tincidunt et. Fusce metus tellus, euismod nec ornare nec, eleifend vel nunc. Donec et aliquet metus, sed tristique est. Mauris non aliquet urna, eget rutrum enim. Etiam posuere felis eget lacus pellentesque, ut dapibus dui vehicula. Proin vel fermentum ligula. Suspendisse accumsan a velit lacinia mollis. Fusce imperdiet id nisi quis maximus. Curabitur convallis eros nec hendrerit volutpat. Suspendisse vestibulum nibh urna, sed cursus odio euismod vitae. Morbi ornare tempor eros ut scelerisque.</p>
<div id="helpbar" class="closed">
<span><p>HELP</p></span>
<div>
<p>This is where the help is</p>
</div>
</div>
</div>

How to mask parent div with child div?

There's a continuous background tile in the parent, like so:
#parent{
background: url('tile-bg-under-menu.png') repeat-x center 32px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
Then, I have the child, that is above the parent with another image, like so:
#parent .child {
background: url('menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
margin-top: -20px;
}
So, I would like to hide the exact portion of the #parent div that is behind the .child div in the width and height of the #parent div.
I'm looking for something like the inverse of clip or anything that would work the same (masking the parent with the child).
The reason for the question:
The reason I ask this is because: the .child div has a semitransparent background, that has a portion that is overlapping #parent "horizontal tile" which is also semitransparent; so when they meet, their semitransparent portions cover/intersect each over at that part, which is ugly, and that is not part of the graphical plan.
EDIT: I can't use jpg, because the divs are floated above a "dynamic" content.
I tried to:
make a ::before and ::after work-around, outside them, but I couldn't get the content (background tile) to reach to the ends of the browser window.
make a png that is 4k in width and empty exactly at the portion where the .child is present. This was not as bad idea as it sounds, but with this there is a pixel movment to the left or to the right according to differing browsers.
The solution can be either with CSS or JavaScript - it doesen't matter.
It seems that there is no equivalent to an inverse clipping: Is there an inverse to the CSS "Clip" property; hide the clipped area?
Clarification:
The div part looks something like this:
[(#parent)tile part]{[-here curve down.child overlapping part]here curve up-}[(#parent)tile part]
The demo fiddle: https://jsfiddle.net/iorgu/13k2hn9y/
And the snippet:
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
width: 100%;
background-attachment: fixed;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="child">
</div>
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>

You can achieve this with display flex, see code below
I moved the background image for the parent to the 2 spacer children. With the logo being the child in the middle. I set the spacers to flex-grow: 1 so they will expand the width.
Your logo image currently, needs to be properly centered (edit the image so it is symmetrical)
If you want to learn more about flex read https://css-tricks.com/snippets/css/a-guide-to-flexbox/
header{
position: fixed
}
/*#masthead */
/*top: 25px;*/
#parent {
display: flex;
height: 151px;
width: 100%;
}
/*.header-wrap*/
#parent .child {
background: url('https://ladyfx.ae/wp-content/uploads/2018/03/menu-bg.png') no-repeat 50% 0px;
padding-top: 0px;
height: 170px;
width: 553px;
}
#parent, #parent .child{
pointer-events: none;
}
#parent .child .container{
pointer-events: all;
}
.spacer {
background: url('https://ladyfx.ae/wp-content/uploads/2018/01/upper-menu-bg.png') repeat-x center 8px;
height: 151px;
background-attachment: fixed;
flex-grow: 1;
}
<div id="page" class="hfeed site">
<header id="parent" class="site-header" role="banner">
<div class="spacer">
</div>
<div class="child">
</div>
<div class="spacer">
</div>
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dui in quam placerat aliquet. In semper lectus sed lectus iaculis blandit. Etiam egestas ex ac rhoncus commodo. Praesent sagittis eget ante nec interdum. Suspendisse tempus est ac libero rhoncus, laoreet pulvinar mi sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis tincidunt ipsum. Mauris nec arcu mollis, pellentesque nisi vitae, gravida sem. Duis vel velit vel lectus rhoncus luctus a vitae nulla. Nunc nec enim sapien. Quisque tempus dolor at viverra pharetra. Vivamus molestie bibendum sapien, vitae iaculis nisl fringilla euismod. Integer quis tincidunt ligula, at vulputate risus.
In vitae purus nec massa viverra mattis quis id lacus. Pellentesque cursus sapien nec tortor faucibus, sit amet sodales tortor faucibus. Aliquam pulvinar sollicitudin urna, ac suscipit sapien venenatis quis. Morbi eu risus in massa pretium molestie. Fusce rhoncus orci in ornare consectetur. Sed volutpat tristique nibh congue finibus. Integer semper sagittis sem vitae varius. Sed sit amet tellus in justo dictum fringilla. Pellentesque dignissim congue nulla non tincidunt. Etiam tempor ante metus, vel pretium est dapibus at.
Etiam eu consequat leo, sit amet placerat ex. Nullam sit amet lectus turpis. Curabitur ac euismod mauris, quis semper ex. Proin efficitur, odio nec tempus blandit, mauris nisl commodo turpis, a tempor lectus purus quis ex. Aliquam id ipsum risus. Mauris quis massa ut dui porttitor pharetra. Nulla aliquam tellus vitae odio rutrum efficitur. Vivamus accumsan iaculis augue, sit amet dignissim turpis aliquam sed.
Quisque finibus fringilla est vitae lobortis. Duis quis egestas nunc, vel ultricies velit. Sed blandit dolor erat, eu placerat tellus ornare dictum. Suspendisse suscipit, tortor ut auctor facilisis, lacus nisl tempor nunc, non mollis nibh velit ut elit. Duis vel laoreet quam, sit amet egestas diam. Fusce aliquam dignissim ante id bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, augue at consequat mattis, diam nisl porta enim, in gravida dui tortor et tortor. Phasellus elit lacus, luctus sit amet neque id, lobortis placerat est. Donec ac tristique mi. Nulla facilisi. Aenean interdum dictum turpis laoreet vestibulum.
Morbi scelerisque, eros auctor euismod consectetur, justo diam dapibus est, id placerat neque dui ut lorem. Fusce in orci egestas, semper libero id, porta tortor. Etiam nec quam et mauris commodo posuere. Duis gravida, libero nec hendrerit venenatis, lacus felis congue ante, eget rutrum justo turpis quis massa. Donec eget magna vitae dui consequat bibendum. Morbi porta dignissim urna, eget mattis lacus commodo vel. Nunc ligula ex, suscipit in accumsan ut, laoreet eu felis. Morbi sem felis, luctus at lorem a, lobortis vulputate nulla. Duis cursus mi eget arcu placerat consequat. Curabitur venenatis consectetur varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus id ex id commodo.
Donec pretium leo magna, eu viverra lacus vehicula quis. Vivamus vel risus in ligula tristique feugiat ac eu erat. Nulla commodo augue a tortor iaculis varius. Maecenas id facilisis libero. Sed semper, lorem at vulputate tristique, odio ipsum condimentum mi, a volutpat dolor nisi vel risus. Pellentesque at gravida nisi, in vehicula orci. Sed vestibulum aliquam vestibulum. Ut mattis ligula in dolor eleifend, id ultrices sapien lobortis. Suspendisse sed blandit augue. Phasellus et efficitur mauris. In ac urna auctor, hendrerit mauris sed, dictum tortor. Duis nec diam interdum, hendrerit nisi ac, interdum diam. Vivamus fringilla risus nec lacus ullamcorper rutrum. Proin ac pellentesque risus.
Nunc interdum pretium feugiat. Fusce id bibendum turpis, tincidunt iaculis neque. Vestibulum at enim lobortis, venenatis magna eget, commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ipsum eget tellus efficitur auctor vitae eu augue. Etiam nec diam velit. Morbi vel pretium sapien. Suspendisse tempus faucibus orci, ut rutrum sem tincidunt a. Mauris at lorem tellus.
Nunc est velit, tristique suscipit interdum at, mollis non arcu. Sed imperdiet leo quis eleifend laoreet. Pellentesque dapibus at massa pulvinar eleifend. Suspendisse potenti. Etiam elementum placerat est nec dapibus. Nulla libero erat, mattis sed rutrum eget, molestie posuere nibh. Etiam in ex ut lorem auctor pretium. Curabitur eget scelerisque libero, a scelerisque libero. Fusce vel rutrum mauris, in elementum ligula. Vestibulum nisi lectus, blandit quis risus vitae, aliquet lobortis orci.
Pellentesque vel est vitae tellus porta sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vulputate eleifend pellentesque. Integer vel vehicula tellus. Etiam ut euismod orci, vel venenatis massa. Quisque sit amet ipsum vitae metus mollis cursus hendrerit at neque. Nunc cursus eu urna vitae efficitur. Praesent et accumsan felis. Integer maximus condimentum mi eget consequat. Nulla in nulla ullamcorper, vestibulum sem in, ultricies dolor. Vivamus eleifend auctor magna quis varius. Cras lacinia ornare volutpat. Proin porttitor lacus eget convallis mattis. Cras at urna libero. Donec est nisl, commodo in enim ut, dictum molestie neque.
Vivamus sit amet sagittis diam. Sed finibus laoreet lectus, eu rutrum tortor ullamcorper nec. Mauris finibus justo eu tellus pharetra, vel mollis diam venenatis. Aliquam hendrerit nec dolor eget blandit. Nullam id velit ac mauris malesuada dictum quis a dui. Proin nec molestie lectus. Aenean blandit tempus nisl eget scelerisque. Etiam aliquam lorem id quam pretium, quis ullamcorper ex finibus. Donec vulputate condimentum eleifend. Aenean ac consectetur sem. Aenean id eleifend diam. Suspendisse imperdiet sodales tincidunt.
Proin venenatis, tellus sed volutpat interdum, lacus mauris elementum nibh, id commodo lectus lorem vitae sem. Curabitur eget mauris massa. Curabitur viverra egestas consectetur. Donec enim ex, pharetra vitae justo nec, blandit accumsan ipsum. In ac mauris non magna imperdiet facilisis eu a leo. Nunc ipsum lacus, sollicitudin a ipsum non, commodo sagittis nibh. Cras pharetra vehicula enim at consequat.
Ut efficitur mollis erat a placerat. In feugiat mauris eu maximus tincidunt. Donec ut neque a erat vulputate aliquam in et elit. Sed eu est eu mauris rutrum auctor nec et odio. Etiam sapien purus, cursus et hendrerit vitae, fermentum non quam. Aenean a nibh eget tellus rutrum ornare. Etiam imperdiet massa convallis, commodo neque vel, tincidunt elit. Sed et varius turpis, vitae malesuada sem. Nam eu sollicitudin est. Phasellus semper sem at congue vestibulum. Phasellus nisi mi, facilisis vitae lorem et, placerat volutpat sem. Sed feugiat sapien malesuada purus sodales, sit amet faucibus dolor feugiat. Aenean nulla risus, elementum id magna a, pulvinar efficitur felis.
Proin imperdiet enim massa, at sollicitudin libero laoreet vel. Fusce euismod libero at aliquam commodo. Donec tempus enim a pretium consequat. Mauris nec fringilla purus. Aliquam in interdum augue, sed efficitur massa. Vivamus vel erat accumsan, rhoncus urna posuere, feugiat nibh. Sed efficitur magna neque, id tincidunt mauris iaculis sit amet. Nunc maximus auctor est, vitae tristique metus. Integer dapibus risus ligula, nec volutpat est maximus gravida. Praesent tempus consequat augue, et pharetra libero placerat eleifend. Curabitur congue dictum ipsum. In vitae lorem vitae orci vulputate molestie.
Mauris id elit accumsan, molestie elit et, mollis ipsum. Fusce dapibus nisi eget vestibulum pellentesque. Fusce vel tortor at mauris aliquet placerat eu non lacus. Sed vestibulum auctor ligula, sed posuere urna congue ut. Integer et molestie elit. Curabitur aliquam suscipit dui eu elementum. Fusce sollicitudin, sem ut finibus finibus, turpis enim efficitur urna, nec aliquam urna elit vitae justo. Morbi nec lectus neque. Integer aliquet est eget pharetra blandit. Maecenas tortor quam, porta vel egestas ac, consequat in lectus. Cras lacinia lectus tellus, quis varius metus molestie sed. Quisque gravida eleifend sem cursus tincidunt. Sed eget orci non nisi tempor tempus sit amet vel felis. Pellentesque quis ex sed mi ultricies tincidunt a eget velit. Phasellus finibus eget massa eleifend posuere.
Vestibulum pellentesque tellus vel bibendum eleifend. Phasellus vitae mauris leo. Nunc ut orci fringilla, maximus urna nec, cursus quam. Etiam egestas, tortor sit amet ornare dignissim, augue ante imperdiet metus, sed volutpat lacus orci congue felis. Etiam convallis mi quis ex laoreet tincidunt. Phasellus vitae turpis id magna posuere ornare. Duis et malesuada mauris, in ultricies nunc. Phasellus non felis mollis, pretium lectus id, sagittis nisi. Nullam volutpat leo ut turpis aliquet blandit. Quisque ut felis mi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas hendrerit eros vel ipsum placerat maximus. Nunc sed vestibulum risus, quis porta est. Phasellus consequat fringilla quam, ac elementum ligula mollis a. Maecenas facilisis lectus et ornare sodales. Nullam sed rutrum urna, nec volutpat quam. Etiam iaculis a sapien eu euismod. Morbi tempus, ligula ac facilisis scelerisque, quam purus consectetur mauris, vitae iaculis quam purus ut felis. Suspendisse consectetur lobortis velit, sed ultricies purus. Curabitur erat leo, volutpat non dapibus id, pretium at lorem. Quisque accumsan purus sit amet volutpat dapibus. Vestibulum malesuada ipsum in ipsum consectetur blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in est tincidunt, lobortis odio et, ultrices ligula. Suspendisse tempus quis nisl in efficitur. Nunc in leo cursus, interdum sapien ut, porta est.
Morbi a arcu quis libero pretium lobortis. In nisl tortor, ullamcorper fermentum elit ut, vestibulum vestibulum tortor. Maecenas vitae libero a lorem commodo blandit eget id erat. Mauris ac ultrices dolor. Mauris volutpat magna sit amet diam consequat, in lacinia lorem iaculis. Phasellus et urna augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum at risus sit amet sem elementum efficitur in eu lectus. Curabitur at turpis at ante sagittis dapibus id nec turpis. Pellentesque placerat lectus eget mauris tincidunt, ut porta velit faucibus. Nunc sed malesuada ex, in mattis dolor. Nam ac purus laoreet, aliquet lorem quis, posuere libero. In suscipit est ornare congue auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus nec eleifend justo. Nam ut dapibus mi, quis scelerisque velit. Sed nec lectus egestas, sollicitudin ante ac, bibendum massa. Curabitur nec volutpat purus.
Cras sed ligula ut ipsum tincidunt mollis. Sed egestas tellus erat, vel porta nulla facilisis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor lorem et neque auctor euismod. Nam ac interdum turpis. Vivamus placerat ipsum nec nibh laoreet efficitur. Curabitur fringilla vestibulum nibh ut euismod. In suscipit rutrum aliquet. Vivamus non euismod velit, sit amet cursus elit. Cras ultricies velit sed tellus ullamcorper, eu auctor leo euismod. Donec at ultrices est. Cras mollis justo eu interdum suscipit.
Vivamus eleifend justo id diam posuere dictum. Aliquam posuere, orci dapibus lacinia eleifend, tellus neque consequat diam, eu laoreet sem lacus quis libero. Curabitur rhoncus at sem non feugiat. Maecenas blandit imperdiet leo sit amet euismod. Vivamus rutrum eleifend lectus sit amet pellentesque. Pellentesque sodales nunc a odio faucibus pretium gravida eu ligula. Suspendisse pharetra ipsum vel ultricies malesuada. Aenean eget lobortis justo, in posuere enim. Praesent rutrum porta metus, sollicitudin maximus risus semper eu. Sed volutpat tincidunt lectus, ac scelerisque massa rhoncus in. Mauris eget augue venenatis, ultricies turpis ac, finibus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis vehicula dolor, vitae congue ligula ultrices id. Integer vitae lacus in mauris finibus varius nec sed est.
</div>
</div>

i think this is what you need. utilizing css position property
.parent {
height: 200px;
background: red;
background-image: url('src-to-image');
position: relative;
}
.overlay {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
.overlay > img {
position: relative;
/**use top and left property to even cover more specify areas**/
display: inline-block;
/**set width, height property to specify coverage dimensions*/
}
<div class="parent">
<div class="overlay">
<img src="" alt="" />
</div>
</div>

Javascript- Background scrolling slower when there is more content on the webpage on different screen resolutions

I made a webpage and wanted to have the background move slower when scrolling, so that the whole background image is fully visible. When I add content to that webpage the total scrolling height changes. So I made a calculation that slows down the scrolling speed when there is more content.
It works when I tested it on my 1920x1080 screen.
When I tested it on different screen resolutions it did not work properly anymore. The background repeated itself on the top causing a weird transition. I tried to make changes to the calculations but I did not get it to work.
How can I prevent that transition from happening on other screen resolutions?
function calcParallax(tileheight, speedratio, scrollposition)
{
return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById('ground');
var body = document.body,
html = document.documentElement;
var webheight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
//10001 is the scroll length of page where you need a speedratio of 5.7 to see the full background image.
//This only works on 1920x1080
var speedratio = webheight * 5.7 / 10001;
//2670 is the height of the background image.
var groundparallax = calcParallax(2670, speedratio, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px";
};
};
body
{
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#ground {
background-repeat: repeat;
background-attachment: fixed;
}
.pageContentBox
{
margin-left: 170px;
margin-right: 170px;
background-color: rgba(57, 57, 57, 0.5);
}
.pageContent
{
margin-left: 50px;
margin-right: 50px;
color: white;
}
<body id='ground' background="https://i.imgur.com/Yljakhv.jpg">
<div class= pageContentBox align="centre">
<div class= pageContent align="centre">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et urna ultrices felis sagittis bibendum. Proin mattis faucibus augue. Aliquam eu erat ac orci pretium tempor sit amet eget ex. Fusce eget pharetra turpis. Ut tristique aliquet ligula, quis iaculis sem. Phasellus tempus imperdiet felis. Donec sit amet lacinia purus. In vitae tincidunt ante, nec feugiat odio. Integer ultrices sem sed finibus porttitor. Vestibulum egestas vehicula ultricies. Morbi vehicula urna ut ipsum sodales porta. Mauris turpis nisi, imperdiet eget feugiat vitae, hendrerit eu massa. Vestibulum luctus sit amet turpis at condimentum. Suspendisse in est ultrices, facilisis nisl vestibulum, sollicitudin justo. Curabitur ultricies malesuada purus eu viverra. Phasellus interdum venenatis porttitor.
Mauris fringilla vulputate iaculis. Nunc urna lectus, varius quis pharetra at, fringilla a erat. Maecenas mollis orci sed enim sagittis, sit amet dignissim nibh pellentesque. Vivamus laoreet ultrices urna, ut blandit enim. Ut volutpat arcu interdum mi placerat tempor. Sed placerat lacus lectus, vitae placerat neque scelerisque vitae. Morbi semper lobortis eros. Maecenas semper, magna ac fringilla rhoncus, est urna suscipit ante, bibendum sodales urna lectus id turpis. Vivamus semper justo sed ligula dictum, non scelerisque tortor consectetur. Integer metus tellus, posuere eget nisl ac, fermentum sodales diam. Nunc tincidunt laoreet mauris, sed pharetra nulla ultrices at. Curabitur vel est massa.
Donec eu imperdiet nulla. Pellentesque tristique semper congue. Pellentesque iaculis ut ligula quis efficitur. Fusce nec nisi pulvinar nisl suscipit pharetra. Nunc ac varius augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem augue, euismod a leo in, laoreet imperdiet magna. Etiam pellentesque eros magna, quis viverra nunc laoreet in.
Donec ut varius ante. Nunc tristique, tellus feugiat fringilla mattis, ante augue vehicula mi, at elementum massa nibh nec erat. Phasellus euismod, metus non vulputate imperdiet, ante lacus laoreet augue, ut condimentum tortor enim at augue. Donec congue et dolor vel maximus. Sed volutpat orci eget dui blandit, at laoreet nisl dapibus. Nunc vitae interdum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ipsum dui, bibendum ac faucibus mattis, pharetra id enim. Morbi faucibus ante id lacus consectetur, ut commodo neque molestie.
Pellentesque convallis blandit accumsan. Quisque non nunc ac massa venenatis blandit nec a nisl. Ut iaculis sagittis lectus. Donec ut porta nisi. Integer eget venenatis nibh. Nulla et interdum augue. Mauris non gravida nisi, et imperdiet ante. Cras convallis aliquam ullamcorper. Cras malesuada scelerisque justo, pretium sagittis quam dignissim quis. Curabitur tempus porta hendrerit. Morbi at varius risus. Proin elementum, erat nec auctor maximus, elit mauris accumsan dolor, et hendrerit nulla diam vitae quam. Aliquam malesuada sollicitudin arcu eu porta. Suspendisse eget massa massa. Curabitur et urna placerat, molestie justo in, mollis dolor.
</h1>
</div>
</div>

In browser all html rendering and executing javascript is running on main-thread so animation performance will degraded
(if you are using animation property that running on main-thread , also scrolling is affected by main-thread activity)
Always use animation property that are running on compositor-thread e.g transform, opacity so animation not will affected by main-thread, result in smooth animation effect.
see which property will running on compositor-thread or on main-thread cssTrigger
Read below articles before start working on animation.
Css-vs-Javascript
Animations-and-Performance
The-basics-of-Easing
Animating-between-Views

How to transform jQuery in ES6?

I'm working on a project and they asked me to not use jQuery at all, because it seems that ES6 can completely replace jQuery.
I made this code for hide a navbar on scroll down, do you have any idea how to transform this in ES6 ?
$(document).ready(function () {
'use strict';
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
Thanks a lot !

This is more to do with HTML5, rather than ES6.
eg. Below is still using ES5, but not using jQuery.
Anyway, the changes are not massive, have a look below. If you wanted the below to be more ES6, then var's, could become let & const, function () { could become () => {, unless you want the other this.
var c, currentScrollTop = 0,
navbar = document.querySelector('nav');
window.addEventListener("scroll", function () {
var a = window.scrollY;
var b = navbar.clientHeight;
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.classList.add("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.classList.remove("scrollUp");
}
c = currentScrollTop;
});
nav {
background-color: red;
padding: 20px;
color: white;
border: 1px solid black;
display: block;
position: sticky;
top: 0;
}
.content {
position: relative;
}
.scrollUp {
background-color: pink;
}
Sticky header.
<div class="content">
<nav>
The Nav BAR
</nav>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam.
Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique.</div>

You can do $(window).scroll with window.addEventListener('scroll', function(){ -.
document.documentElement.scrollTop
You can use dom node .classList to modify classes

We Keep Coding

JavaScript is the programming language of the Web.