javascript - 将通知消息滚动到固定菜单底部

Question

我想将通知消息滚动到顶部固定菜单的底部，但正文内容继续滚动，只有通知框将固定在固定顶部菜单的底部。 这是一个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;
}

谁能帮我解决这个 scrollTo 函数？ ty.

Answer 1

如果我正确理解你的问题，这应该会让你朝着正确的方向前进:

$(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' });
        }
    });
});

我已经更新了你的 JSFiddle:http://jsfiddle.net/VPzxG/1823/