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/

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

1 个答案: