JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

kjh
<div class = "MissionContainer">
    <div class = "NenLogo"></div>
    <div class="GradientOverlay"></div>
    <div class = "MissionBar">this is text. this is text. this is text. this is text. this is text. this is text. this is text. this is text. this is text. this is text. </div>
</div>
asdf

CSS

.MissionContainer {
    border: #3e628f 10px solid;
    background: #e2ebfc;
    min-height: 60px;
    margin-left: 50px;
    margin-top: 10px;
    height: 60px;
    overflow: hidden;
    margin-bottom: 30px;
}
.NenLogo {
    background: red;
    height: 100px;
    width: 100px;
    display: block;
    border-radius: 30px;
    position: absolute;
    margin-left: -60px;
    margin-top: -20px;
    z-index: 4;
}
.MissionBar {
    vertical-align: middle;
    margin-left: 60px;
    padding-top: 10px;
    margin-right: 20px;
    padding-bottom: 10px;
}
.GradientOverlay {
    background: linear-gradient(rgba(226, 235, 252, 0), #E2EBFC);
    height: 20px;
    margin-top: 40px;
    display: block;
    position: absolute;
    z-index: 3;
    width: calc(100% - 86px);
}

JavaScript

$(helloFun());


$( window ).resize(function() {
	helloFun();
});

function helloFun() {
    var MissionBarHeight = $('.MissionBar').height(); 
    console.log(MissionBarHeight); 
 
     if (MissionBarHeight < 50) { 
          $('.GradientOverlay').css({'display' : 'none'}); 
     }  
     else { 
          $('.GradientOverlay').css({'display' : 'block'}); 
     } 
};