JSFiddle - React, Tailwind, and code Playground

by StormMan

HTML

<div id="blnotfix">Блок исчезает</div>
<div id="blfix">Блок появляется</div>

CSS

body{
    min-height: 1500px;
    margin: 0;
    padding: 0
}
#blnotfix{
    background-color: blue;
    padding: 10px;
}
#blfix{
    display:none;
    position:fixed;
    top:0; 
    background-color: red;
    width: 100%;
    padding: 10px;
}

JavaScript

jQuery(function(f){
    var element1 = f('#blnotfix');
    var element2 = f('#blfix');
    f(window).scroll(function(){
        element1['fade'+ (f(this).scrollTop() > 40 ? 'Out': 'In')](200);
        element2['fade'+ (f(this).scrollTop() > 40 ? 'In': 'Out')](200);           
    });
});