JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<div class="art">
    <h1>ART</h1>
    <a href="#info" class="link">Click Me</a>
</div>
<div class="art-info" id="info">
    <h2>ART INFO</h2>
    <p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p> <p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p><p>LOREM IPSUM</p> 
</div>

SCSS

.art {
    width: 100%;
    height: 12vh; 
    padding: 1.5rem;
    background-color: green;
    
    position: fixed;
}

.art-info {
    display: none;
    opacity: 0;
    
    &.active {
        transition: opacity .2s ease;
        
        display: block;
        opacity: 1;
        width: 100%;
        height: 100%; 
        padding: 1.5rem;
        background-color: yellow;
        
        position: absolute;  
        margin-top:23vh; 
    }
}

h1, h2 {
    margin: 0;
    padding: 0;
}

JavaScript

//smooth Scroll && on Scroll hide
$('.link').on('click', function(e){
    e.preventDefault();
    
    $('.art-info').addClass('active');
    
    //console.log('click');
    var id = $(this).attr('href'),
        pos = $(id).offset().top;
    
    $('html, body').animate({ scrollTop: pos }, 1000); 
    
});

var headerTop = $('.art').offset().top;
var artbarHeight = $('.art').height();

$(window).scroll(function() {
  
    var scrollTop = $(this).scrollTop(); // Current vertical scroll position from the top
    //console.log(scrollTop);
    
    if(scrollTop === 0) {  
       $('.art-info').removeClass('active');
        
    }
    
    $('.art-info').css({
            opacity: scrollTop / $('.art-info').offset().top
        });
     
});