滚动通知消息直到固定菜单的底部

Question

I want to scroll a notification message till bottom of top fixed menu but the body content continue to scroll and only the notification box will remain fixed to bottom of fixed top menu. Here is a fiddle example:

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;
}

Can anyone help me with this scrollTo function please? ty.

Answer 1

If I understand your question correctly, this should get you in the right direction:

$(document).ready(function() {
    $(window).scroll(function() {
        var menuHeight = $(".menu-fixed").outerHeight();
        var windowScrollTop = $(window).scrollTop();

        if (windowScrollTop > 80) {
            $(".notification").css({ top: windowScrollTop + menuHeight });
        }
        else {
            $(".notification").css({ top: 'auto' });
        }
    });
});

I've updated your JSFiddle: http://jsfiddle.net/VPzxG/1823/