I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle:
HTML:
<div class="menu-fixed">I am a fixed menu! </div>
<div class="bodyContent">I am the body content of this page
<div class="notification">I am a notification message!
Scroll me to the bottom of top menu only! and back.</div>
</div>
CSS:
.menu-fixed{
position: fixed;
text-align: center;
width: 100%;
height: 100px;
border:1px solid blue;
background: rgba(0,0,0,0.3);
font-size:30px;
}
.bodyContent{
padding-top:120px;
height:1000px;
width:100%;
background:lime;
text-align: center;
font-size:50px;
}
.notification{
height: 100px;
left: 80%;
position: absolute;
width: 200px;
background: rgba(255,255,255,0.9);
font-size:20px;
}
If anyone could assist with implementing the scrollTo function for this scenario, I would greatly appreciate it. Thank you!