JSFiddle - React, Tailwind, and code Playground

by Alex Balu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="fixed_logo">
    <div id="logo_nav_wrapper">	<a href="#" style="background-color: transparent;"><img src="http://oi58.tinypic.com/119q6hf.jpg"></a>

        </div></div>
        
        <!-- this div is for scrolling -->
    <div class="div" style="background-color:black; margin-top:800px; height:100px; width:100px;"></div>

CSS

#fixed_logo {
    position: fixed;
    top: 20%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    z-index: 999;
}

.logo {
    position: fixed;
    top: 20%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    z-index: 999;
}
.sticky_logo {
    left: 0!important;
    margin: 0!important;
    top: 0!important;
    width: 100%!important;
    height: auto!important;
}

JavaScript

var $document = $(document);
$document.scroll(function () {
    var $document = $(document);
    if ($document.scrollTop() >= 50) {


        $('#fixed_logo').addClass('sticky_logo');
    }


});