We Keep Coding

Control Scroll on Bootstrap Modal with JavaScript

I have a Bootstrap modal with a scroll bar and I'd like that each time a user clicks on a button in the modal body, I execute a function that goes to the next step of a wizard within the modal. The issue is, I want that every time a button is clicked and I go to the next step, I want the scrollbar of the modal to return to the top of the modal.
I know you can achieve this easily within a web page using "window.scrollTo(0, 0)" but how do I achieve this within a Bootstrap modal.
Thanks

You can use the jQuery scrollTop function
$(document).ready(function() {
let $modal_body = $('.modal-body')
let $scroll_btn = $('.scroll-to-top')
$scroll_btn.click(function() {
$modal_body.scrollTop(0)
})
})
.modal-body {
max-height: 60vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body overflow-auto">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada semper sem, at congue odio iaculis vitae. Morbi tempus ut quam at semper. Etiam ultrices nunc sed velit pellentesque, sit amet dignissim eros dapibus. Etiam laoreet eros eget
justo efficitur porttitor. Sed eget commodo eros. Nulla non eros ac nulla vestibulum placerat eu quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean tempor augue eget rhoncus luctus. Vestibulum metus quam, egestas
non justo ut, mattis pulvinar mauris. Donec eget nulla suscipit, lacinia libero in, rhoncus ex. Etiam consectetur tincidunt enim sed hendrerit. Suspendisse quis lobortis eros. Nulla sodales sagittis nisl, a malesuada nibh.
</p>
<p>
Ut dignissim metus vitae purus tempus, non suscipit dui dapibus. Nullam facilisis sapien sit amet nibh pulvinar gravida. Praesent quis mauris eu arcu aliquam rutrum. Nullam congue sodales nulla, in consectetur nibh. Donec feugiat, diam a congue dictum,
erat libero consectetur dui, ut iaculis nunc leo at metus. Aliquam pellentesque vehicula nisl et faucibus. Fusce vitae nulla vitae lectus consectetur semper eu vitae sapien. Morbi eu erat volutpat, tempus lorem non, rutrum mi. Duis tempus ipsum
vel placerat tincidunt. Quisque pellentesque suscipit nibh a congue. Sed malesuada, risus ac pellentesque viverra, odio eros ultricies elit, nec lobortis purus enim vitae ligula.
</p>
<p>
Sed ultricies, ante at commodo dignissim, nibh nunc pharetra augue, sit amet consequat ipsum nisl vitae urna. Etiam varius lacus sed ornare malesuada. Nullam pulvinar pharetra leo, at eleifend metus fringilla eu. Quisque eget fringilla turpis, malesuada
luctus turpis. Sed molestie laoreet porta. Mauris condimentum ut erat a tincidunt. Duis id vehicula ligula, ac congue neque. Mauris accumsan urna ac accumsan consectetur. Nunc sodales sem sed nulla imperdiet, in pharetra justo congue. Integer
ullamcorper sem quis quam mattis tristique. Nulla pretium congue dictum.
</p>
<p>
Nullam lectus massa, ornare vel dictum et, egestas in augue. Curabitur porttitor sem ex, et lacinia leo cursus quis. Morbi eu dapibus mauris. Fusce volutpat non ex eget lacinia. Vestibulum ex dui, sollicitudin a enim vel, volutpat varius turpis. Donec
volutpat, est non pharetra efficitur, purus neque consectetur tellus, vitae scelerisque quam felis eu quam. Fusce dictum ornare est, vitae facilisis metus fermentum et. Pellentesque porta purus nec tincidunt congue. Donec bibendum volutpat ligula
id ultricies. Vivamus non ante nec enim rutrum feugiat ut eget magna. Fusce justo quam, venenatis sed purus eget, ultrices consequat elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.
Morbi pretium convallis eros non viverra. Integer lectus lectus, imperdiet eget erat in, lacinia pellentesque turpis.
</p>
<p>
Maecenas pulvinar justo at sodales fermentum. Pellentesque nec suscipit mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus arcu risus, consectetur vel pellentesque sed, accumsan in turpis. Nunc
quis enim aliquet, placerat ligula at, imperdiet mi. Morbi viverra pellentesque dolor, et fermentum metus vestibulum sit amet. Sed vel felis egestas, maximus libero id, tincidunt ante. Quisque sed risus quis magna auctor mattis. Etiam tempor
scelerisque augue non malesuada. Sed accumsan dui tellus. Mauris dignissim ante quis rhoncus lobortis. Mauris sollicitudin nunc nec mattis vehicula.
</p>
<p>
Proin non ex tellus. Etiam ornare neque sed nisi aliquet interdum. Nulla blandit tempor risus, at pharetra mi scelerisque eu. Suspendisse luctus sapien et tortor scelerisque facilisis. Nulla a augue pharetra, vehicula odio aliquam, venenatis ligula. Aenean
et odio odio. Morbi commodo viverra ipsum, consectetur aliquet dui dapibus vitae. Nunc egestas nec augue in mattis. Sed vehicula a tortor et blandit. Praesent augue ex, auctor vitae tincidunt vel, molestie dignissim lorem. Sed ligula urna, commodo
et finibus quis, laoreet vitae urna. Fusce feugiat nulla molestie, lobortis quam sit amet, vehicula mi. Aliquam eget tincidunt mi.
</p>
<p>
Proin dapibus consequat quam, sed tincidunt velit. Curabitur dolor tellus, gravida eu pretium ac, mattis eu turpis. Integer quis risus lobortis, consectetur magna in, rhoncus ipsum. Vestibulum ullamcorper lectus sed condimentum viverra. Nunc egestas lobortis
urna ut luctus. Integer nunc velit, mattis non sodales non, suscipit quis nibh. Integer vitae eros ligula. Integer gravida facilisis viverra. Maecenas interdum odio ut semper efficitur. In dapibus a lorem dapibus feugiat. Morbi non posuere lacus.
</p>
<p>
Maecenas facilisis luctus dapibus. Phasellus congue turpis magna, ut congue nisi fermentum sit amet. Fusce non risus ac metus posuere bibendum in sit amet massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec sed gravida ligula. Fusce rhoncus auctor dui, id mollis lectus porta eget. Donec ullamcorper non est et porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nam eu dolor in libero gravida commodo sit amet id nibh. Nam massa nisl, rhoncus eu tempus in, dignissim et turpis. Proin aliquam convallis accumsan. Maecenas in vehicula elit, a pellentesque mi. Maecenas feugiat purus nec euismod elementum. Nam vel purus
laoreet, facilisis tellus vel, vehicula odio. Pellentesque est elit, vulputate gravida felis vitae, consequat varius diam. Donec imperdiet aliquet lobortis. Donec nec dictum nisl. Pellentesque blandit ac est ut suscipit. Vivamus nec eros in
neque fringilla dictum eget non ligula. Pellentesque condimentum convallis dolor, non pharetra eros aliquet a. Donec nisl risus, pretium ut aliquam vitae, efficitur vel mauris. Praesent feugiat facilisis dolor, non aliquam lectus suscipit sed.
Aenean dictum nisi ut euismod lacinia. Quisque scelerisque ultricies viverra.
</p>
<p>
Aenean nibh ipsum, posuere sed aliquet ac, laoreet imperdiet lacus. Nunc tellus ex, cursus rutrum purus vitae, iaculis facilisis orci. Pellentesque vitae iaculis massa. Proin fringilla risus dui, ac pulvinar purus eleifend a. Duis at tellus non nulla
tempor vulputate. In dignissim, enim id bibendum condimentum, urna ante consequat odio, in varius augue massa eget turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor, nibh id hendrerit scelerisque, metus purus malesuada
nisl, quis bibendum mauris nibh at dui. Vestibulum viverra nulla faucibus, ornare felis a, rutrum nisl. Maecenas eu porttitor nulla. Nunc viverra urna eu ex rhoncus dapibus. Nulla non dignissim mi, nec facilisis ipsum. Integer vitae leo eget
velit consequat consequat nec sed dui. Pellentesque ipsum urna, egestas et ipsum eget, venenatis fringilla dui.
</p>
<p>
Nullam maximus risus ac sapien ullamcorper, ac euismod erat faucibus. Duis vel est quis leo malesuada porttitor. Nullam hendrerit sagittis commodo. Mauris finibus dictum orci, eget euismod nulla consequat eu. Integer ultricies nisl vel lorem pulvinar,
nec maximus massa efficitur. Donec venenatis dictum sem a elementum. Phasellus lectus augue, cursus at nulla in, scelerisque vulputate lorem. Pellentesque pellentesque laoreet lectus pulvinar ullamcorper. Phasellus faucibus risus ut augue rutrum,
et tempor urna dictum. Fusce id lacus urna. Etiam malesuada at ex a aliquet. Phasellus mollis mi non urna tristique, et vestibulum libero commodo. Phasellus tempor tellus at arcu tempor gravida.
</p>
<p>
Praesent laoreet tellus tempus orci sodales aliquet. Pellentesque aliquam faucibus quam, id aliquam velit condimentum vel. Etiam convallis leo at felis varius, vitae consectetur erat varius. Nullam ante nisl, sollicitudin non ornare sed, interdum ac nibh.
Curabitur sed vehicula dolor. Vivamus convallis arcu vel fermentum volutpat. Ut metus lacus, molestie sed condimentum ac, scelerisque vel neque. Pellentesque sed aliquam magna. Curabitur tempor ultrices magna eu ullamcorper. Vivamus ut nulla
in elit rhoncus finibus. Duis tristique tellus sit amet odio cursus, nec dignissim lacus euismod. Aliquam erat volutpat. Maecenas id mi imperdiet, maximus dolor in, feugiat metus. Donec mauris velit, euismod nec tellus sed, blandit facilisis
sem. Nulla facilisi.
</p>
<p>
Aenean augue felis, feugiat quis auctor ac, ultricies pellentesque justo. Proin ultricies id ante vitae porttitor. Proin porttitor lacinia erat. Donec eleifend condimentum justo, at tincidunt est. Quisque fringilla sollicitudin nisi, eget rhoncus sem
tincidunt in. Quisque faucibus placerat arcu et tempus. Duis sodales tincidunt lorem, at suscipit ex maximus ut. Donec efficitur diam et dui pharetra, quis condimentum ante iaculis.
</p>
<p>
Aliquam quis massa ex. Donec auctor dui quis est sodales fermentum. Aliquam nulla diam, venenatis maximus dui id, ultricies posuere risus. Nullam auctor rhoncus nibh at malesuada. Aenean at hendrerit orci, sed pellentesque metus. Maecenas porta ante sapien,
sit amet sollicitudin augue volutpat eu. In placerat ornare lorem, vel ullamcorper felis imperdiet sed. Ut pharetra luctus orci porttitor vestibulum. Morbi eu tortor at enim ornare rhoncus. Ut vitae enim posuere, tristique risus et, tempor orci.
Nam varius tellus eu magna scelerisque dignissim. Nunc auctor ligula in efficitur convallis. Nullam sed ligula enim. Nam ipsum ante, convallis vel malesuada at, congue ac tortor.
</p>
<p>
Vivamus gravida, magna eget lacinia consequat, quam libero feugiat quam, sit amet euismod lorem velit et nisi. Suspendisse ac pharetra dui. Nam venenatis viverra felis, id auctor nisl convallis id. Nunc dignissim rutrum nulla vel fermentum. Sed sagittis
gravida nibh ut facilisis. Curabitur quis faucibus arcu. Sed maximus tincidunt mattis. Suspendisse accumsan neque nec lorem consectetur fringilla. Nulla porta ante massa, quis sagittis sem mattis vel. Sed vitae nibh tincidunt, vehicula dolor
et, cursus sem.
</p>
<a class="scroll-to-top btn btn-primary" href="#">scroll to top</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>

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"><!-- .header-wrap -->
</div>
</header><!-- #masthead -->
<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"><!-- .header-wrap -->
</div>
<div class="spacer">
</div>
</header><!-- #masthead -->
<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>

Fix/Unfix Div when scrolling

Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.

Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>

jQuery detect element in viewport - calc causing issues

I am trying to detect when an element is completely out of the viewport, I have this so far...
/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = $(".element").offset().top + $(".element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if((bottom_of_screen > top_of_element) && (bottom_of_screen < bottom_of_element)){
// The element is visible, do something
console.log('visible');
}
else {
console.log('not visible');
// The element is not visible, do something else
}
});
})
html, body {
padding:0;
margin:0;
}
.header {
background:blue;
position:fixed;
height:100px;
width:100%;
color:white;
text-align:center;
z-index:9999;
}
.element {
height:calc(100vh - 100px);
background:wheat;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
<div class="element">
This is a test element
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
It is not working for unless I remove the calc from the .element height.
How can I modify this so that it takes my sticky header into account?

/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = top_of_element + $(".element").outerHeight();
var scrolled = $(window).scrollTop();
if (scrolled + $('.header').height() < bottom_of_element && scrolled + $(window).height() > top_of_element) {
console.log('visible');
} else {
console.log('not visible');
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.header {
background: blue;
position: fixed;
height: 100px;
width: 100%;
color: white;
text-align: center;
z-index: 9999;
}
.element {
height: calc(100vh - 100px);
background: wheat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<div class="element">
This is a test element
</div>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>

Scriptaculous Shaking Effect Problem

The scriptaculous shaking effect somehow produce some bugs for Webkit browsers, including Chrome and Safari. When shaking, the element will shift to the top left of the screen covering everything. An example code is given as below, are there any ways of solving this?
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects'></script>
</head>
<body>
<div style="z-index: 20000; position: fixed; display: block; bottom: 10px; right: 10px; background-attachment: scroll; background-color: white;" id="floating_text">
<p>This should be some floating text.</p>
<p>Some more floating text.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ligula, tempus adipiscing posuere id, sollicitudin sed nulla. Sed neque diam, volutpat non interdum vel, pellentesque vitae lorem. Vivamus et leo risus. Fusce at nunc nulla, non ultricies elit. Aliquam erat volutpat. Aliquam pulvinar mi at purus laoreet eu varius nisl laoreet. Mauris lobortis sapien diam. Maecenas arcu est, ullamcorper fringilla placerat nec, semper ut arcu. Curabitur metus nisl, ornare nec posuere at, tincidunt tempor nisi. Ut ut est risus. Curabitur elit urna, sagittis sagittis cursus quis, accumsan eget nulla. Donec odio ante, rutrum at fermentum vel, tempus gravida odio. Quisque a ante a urna vehicula posuere ac ut orci. Integer luctus sem et justo condimentum consequat. Phasellus pharetra malesuada velit, et commodo arcu imperdiet vitae. Suspendisse vitae risus orci. Maecenas massa tortor, sodales ut luctus ac, lacinia vitae sapien. Vestibulum sit amet rutrum est. Nullam magna erat, semper a volutpat id, porta sed nisl.</p>
<p>Praesent nec consectetur sapien. Integer mollis libero a odio pharetra vulputate. Donec mattis consequat arcu, vel ultricies orci imperdiet sit amet. Mauris sit amet tellus libero. Morbi ac venenatis ligula. Cras tellus neque, porttitor sit amet hendrerit nec, ornare quis tellus. Nam iaculis mi at mi bibendum at commodo justo pretium. Ut in nibh non diam hendrerit fermentum a ut odio. Curabitur lorem turpis, tincidunt et rhoncus et, pulvinar a metus. Vestibulum a quam sit amet arcu condimentum cursus vitae feugiat lectus. Sed ut lorem tellus, non sagittis enim. Curabitur lectus eros, commodo a elementum et, molestie eget est. Donec ullamcorper, arcu nec volutpat auctor, sem odio interdum tellus, nec volutpat lacus libero at nisl. Aliquam metus sapien, aliquam a rutrum ac, tincidunt at purus. Donec in erat mi. Quisque semper mauris in massa bibendum sed tincidunt augue facilisis. In tempus lacinia urna ac tristique.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique urna sem. Etiam iaculis aliquam dui nec porta. Proin tristique diam non augue mattis tristique. Phasellus nulla erat, adipiscing sed cursus sed, pulvinar eget nisl. Maecenas blandit nibh eu nisl facilisis et semper turpis posuere. Pellentesque auctor sem in massa sollicitudin congue. Vivamus quis lacinia massa. Aliquam sodales dictum magna, eget ullamcorper eros placerat at. Quisque gravida diam sit amet nunc porta aliquam. Ut quis aliquet est. Maecenas risus tellus, euismod id porttitor at, porta id turpis. Phasellus id molestie ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean purus nibh, egestas vestibulum aliquet eget, luctus nec eros. Nulla facilisi. Quisque molestie, sem interdum posuere lacinia, nisl purus ornare lectus, id dapibus lacus dolor in ipsum. Aenean pharetra leo nulla.</p>
<p>Curabitur nisi quam, iaculis eget pellentesque vel, pretium sed massa. In viverra, tellus at sollicitudin fringilla, orci eros blandit elit, a bibendum mauris dolor ut metus. Vivamus pellentesque suscipit diam, vitae euismod mi pellentesque vitae. Nullam neque libero, vehicula ut iaculis at, tincidunt eget leo. Suspendisse vitae velit justo. Nullam vitae sem tincidunt nulla tincidunt mollis in id massa. Duis rhoncus elementum turpis quis mollis. Vivamus egestas urna in velit commodo iaculis. Aenean quis dolor eu odio porttitor rhoncus nec vel eros. Donec ut est eu nisl vehicula pulvinar et id dolor. Donec a dolor neque. Morbi tempus mattis tortor ut rutrum. Phasellus orci metus, pellentesque vel tincidunt nec, pulvinar eu ante. Duis faucibus felis et diam ullamcorper in feugiat urna dignissim. Quisque nec diam mauris, vel viverra arcu. Cras sagittis dignissim nisl in sagittis. Fusce venenatis rhoncus est, nec elementum libero dapibus eget. Donec eu velit metus. Sed sollicitudin felis a diam condimentum in suscipit neque varius. Nulla nec tortor tristique elit malesuada luctus luctus quis leo.</p>
<p>Nullam at quam dui. Ut gravida, tellus malesuada faucibus gravida, purus nulla consequat lorem, pellentesque egestas justo quam et enim. Suspendisse fringilla tellus id odio tristique varius. Cras et metus elit. Etiam interdum adipiscing mollis. Aliquam aliquet vestibulum imperdiet. In consectetur, nunc cursus sodales scelerisque, tellus eros tristique nisl, ut luctus augue dolor vel nibh. Fusce eget dui sed eros tristique varius lacinia id sapien. Nullam ac lorem ac lacus cursus ultricies id a risus. Ut eget dolor sem. Aliquam euismod consequat euismod. Duis sit amet neque et massa ullamcorper tempor.</p>
<p>Quisque rutrum, ipsum ac volutpat dictum, urna diam facilisis enim, ac vestibulum justo metus eu mi. Curabitur nunc sem, consequat a mollis non, bibendum vitae dolor. Mauris pulvinar pellentesque tellus, vel aliquet mauris vulputate vel. Morbi eu ante id nulla ultricies tincidunt. Proin porta, felis nec tincidunt iaculis, justo nibh laoreet dolor, eu sollicitudin arcu justo et odio. Sed suscipit tellus lobortis est tristique semper fermentum magna laoreet. Sed eget ante nunc, vitae varius purus. Mauris nec viverra neque. Morbi et lectus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lobortis magna.</p>
<p>Phasellus elementum iaculis sem in consectetur. Curabitur nec dictum enim. Nunc at pellentesque augue. Nulla sit amet sapien neque, et molestie augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin non elit ante. Mauris justo tellus, feugiat at dapibus a, placerat id felis. Nullam lobortis vehicula rutrum. Fusce tristique pharetra urna, ac scelerisque ipsum consequat eget. Morbi at ipsum in tellus luctus volutpat. Duis placerat accumsan lacus, dictum convallis elit porttitor eu.</p>
<p>Sed ac neque sit amet neque luctus rhoncus. Vestibulum sit amet commodo ante. Duis ullamcorper est id dui ullamcorper cursus. Maecenas fringilla ultricies turpis, nec pulvinar libero faucibus a. Quisque bibendum aliquam sapien, in fermentum arcu iaculis at. Mauris bibendum, metus sed rhoncus fringilla, nisl purus interdum eros, vitae malesuada felis est rhoncus magna. Phasellus elit justo, sagittis nec interdum tincidunt, mollis quis justo. Suspendisse rhoncus rutrum vestibulum. Aliquam ut nunc lectus, quis aliquam risus. Aliquam vel nulla sed odio blandit sagittis. Nulla facilisi. Vivamus ullamcorper, lectus facilisis eleifend accumsan, purus massa sollicitudin nunc, in sodales tellus dui eget est. Morbi ipsum nisi, semper sit amet vehicula sit amet, semper at mauris. Nam mollis massa sed risus scelerisque quis congue mauris tempus. Vestibulum nec urna magna, vitae ornare massa. Aenean adipiscing tempor rutrum.</p>
<p>In hac habitasse platea dictumst. Etiam in dolor eros, eleifend volutpat magna. Sed blandit gravida feugiat. Sed eu dolor in odio sagittis molestie eget ac orci. Phasellus tellus erat, scelerisque tincidunt lacinia sed, placerat eu sapien. Curabitur lobortis feugiat cursus. Nam eu egestas justo. Nullam dignissim enim ipsum, sed semper orci. Donec nulla dui, viverra vel viverra eu, eleifend nec justo. Sed in ultricies turpis. Maecenas ullamcorper, erat ac scelerisque mattis, augue magna laoreet mauris, nec sagittis tellus enim eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum urna eu magna ultricies adipiscing. Phasellus sed urna at nibh euismod vestibulum at eget dui. Nulla ullamcorper viverra tellus ut volutpat. Praesent hendrerit, purus a imperdiet tempus, turpis est suscipit felis, ut commodo diam orci ac augue. Quisque consectetur varius sapien, vel lobortis ante porttitor sit amet. Proin fermentum blandit justo, id faucibus elit feugiat ut. Nulla quam elit, tristique gravida ultrices in, imperdiet et enim.</p>
<p>Aliquam malesuada, nibh eget laoreet malesuada, lorem ligula gravida eros, a consectetur dui odio id urna. Vivamus tincidunt porttitor facilisis. Maecenas vitae lacus at lorem porttitor sodales. Duis et velit ac ipsum cursus ornare. Aliquam eu rhoncus est. Cras nec facilisis tellus. Nunc in felis odio. Nam facilisis dui eu lacus egestas sit amet malesuada dolor volutpat. In placerat dictum turpis ac vulputate. Suspendisse neque odio, elementum sagittis sollicitudin quis, eleifend ac orci. Proin suscipit molestie orci non venenatis. Sed metus mauris, laoreet id lobortis at, tempor eu erat. Mauris tempor, nisi id interdum tempor, tellus ligula pretium mi, a viverra nibh neque vitae est. Integer mattis, lorem ac congue fermentum, quam ipsum gravida erat, in egestas lorem eros ac massa. Vestibulum lobortis ante libero, vel fermentum ante. Aliquam augue ipsum, ullamcorper sit amet dictum id, commodo sit amet lacus. Vivamus elit purus, elementum a vestibulum quis, iaculis id metus. Cras facilisis orci in nulla consequat gravida. Integer blandit, felis at lacinia porta, lacus velit pretium magna, ut eleifend diam magna a justo. Donec scelerisque diam quis nisi molestie vel egestas urna condimentum. </p>
<script type="text/javascript">
Effect.Shake('floating_text');
</script>
</body>
</html>

The DIV takes 100% of the screen once it is "absolutized" by the animation function. If you supply a height and width to "floating_text", it works fine.