Contoh Bar

by RzaaL1306

HTML

<header>
    <div class="logo"></div>
    <div class="below-logo">Here we have just some boring text below the logo.</div>
</header>

<div class="content">
<div class="top-bar"></div>
</div>

CSS

header {
    width: 100%;
    height: 200px;    
    background: rgba(0,0,0,.1);
}
.logo{
    width: 200px;
    height: 60px;
    position: fixed;
    top: 0;
    left: 20px;
    z-index: 100;
    background: rgb(100,100,100);
}

.below-logo{
    width: 200px;
    height: 60px;
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 10;

}

.content {
    width: 100%;
    min-height: 3000px;
    height: 3000px;
    position: relative;
    z-index: 50;
    background: white;
}

.top-bar {
    width: 100%;
    height: 60px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 60;  
    
    /*For Styling only*/
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
    background: rgb(255,140,140);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
}

.top-bar.fixed {
    position: fixed;
}

JavaScript

$(function() {
    $(window).scroll(fixedHeader).trigger("scroll"); 
});

function fixedHeader() {
    var  topBar       = $(".top-bar"),
         topBarHeight = topBar.outerHeight(),
         offset       = topBar.offset(),
         scrollTop    = $(window).scrollTop(),
         initOffset   = $('.content').offset();

    if (scrollTop >= offset.top) {
        topBar.addClass('fixed');        
    }
    if (scrollTop < initOffset.top){
        topBar.removeClass('fixed');
    }
    
}