CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BurebistaRuler
BurebistaRuler

Reputation: 6519

Scroll notification message till bottom of fixed menu

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.

Upvotes: 0

Views: 1770

Answers (1)

Martin
Martin

Reputation: 2300

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/

Upvotes: 1

Related Questions