JSFiddle - React, Tailwind, and code Playground

by Noy Hadar

HTML

<div id="container">
    <div style="height:100px"></div>
    <div id="wrapper">
	    <div id="logo_banner">
            Banner Here
		</div>
	</div>

<div style="height:1000px"></div>
</div

CSS

#container{
    width:400px;
    background: #FFC;
}
#wrapper {
    width:100%;
    border: solid 1px red;
}
#logo_banner {
    width: inherit;
    border: solid 1px red;
}
.banner_fixed {
    position:fixed;

    top:0; 
    }

JavaScript

$(function () {
              var msie6 = $.browser == 'msie' && $.browser.version < 7;
              if (!msie6) {
                var top = $('#logo_banner').offset().top - parseFloat($('#logo_banner').css('margin-top').replace(/auto/, 0));
                $(window).scroll(function (event) {
                  var y = $(this).scrollTop();
                  if (y >= top) {
                    $('#logo_banner').addClass('banner_fixed');
                  } else {
                    $('#logo_banner').removeClass('banner_fixed');
                  }
                });
              }  
            });