JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="content">
      <div class="content__container">
        <div class="fixed-el-top">Top fix element</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptas consequuntur aspernatur totam incidunt perspiciatis, nisi, quas deleniti nostrum sequi officiis doloremque praesentium molestiae quo culpa ipsam, recusandae. Mollitia, ab, nemo. Quis iusto, minima placeat natus unde officiis doloremque in suscipit similique ut, facilis a asperiores optio assumenda blanditiis possimus cupiditate ipsa voluptatem ex sed reiciendis porro nulla aliquam obcaecati? Odio provident autem vero animi itaque repellendus tempore quia voluptas doloremque, eligendi rem sapiente fuga culpa perferendis, aut dolore, amet, aliquam deleniti quam blanditiis laboriosam neque sint voluptates consequatur? Beatae vel quos voluptate sapiente deserunt optio repellendus molestias quo explicabo!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptas consequuntur aspernatur totam incidunt perspiciatis, nisi, quas deleniti nostrum sequi officiis doloremque praesentium molestiae quo culpa ipsam, recusandae. Mollitia, ab, nemo. Quis iusto, minima placeat natus unde officiis doloremque in suscipit similique ut, facilis a asperiores optio assumenda blanditiis possimus cupiditate ipsa voluptatem ex sed reiciendis porro nulla aliquam obcaecati? Odio provident autem vero animi itaque repellendus tempore quia voluptas doloremque, eligendi rem sapiente fuga culpa perferendis, aut dolore, amet, aliquam deleniti quam blanditiis laboriosam neque sint voluptates consequatur? Beatae vel quos voluptate sapiente deserunt optio repellendus molestias quo explicabo!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptas consequuntur aspernatur totam incidunt perspiciatis, nisi, quas deleniti nostrum sequi officiis doloremque...

SCSS

.content{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    padding-bottom: 40px;
    &__container{
      
    }
}
.fixed-el-top{
    z-index: 1;
    border: 4px solid #FFB400;
    background: #fff;
    padding-bottom: 5px;
    transition: transform .4s ease, height .4s ease;
    height: 50px;
    &.fixed{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
}
.fixed-el2{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border: 4px solid red;
    background: #fff;
    padding-bottom: 5px;
    transform: translateY(110%);
    transition: transform 0.3s ease-in-out;
    height: 50px;
    overflow-y: auto;
    &.active{
      transform: translateY(0%);
      transition: transform 0.3s ease-in-out;
    }
    &-btn{
      width: 30px;
      height: 20px;
      position: fixed;
      bottom: 60px;
      right: 10px;
      cursor: pointer;
      background: green;
      z-index: 2;
    }
}

JavaScript

//кнопка показать скрыть нижний фикс блок
$('.fixed-el2-btn').click(function () {
  $(this).toggleClass('active');
  $('.fixed-el2').toggleClass('active');
});

$(window).scroll(function() {
    $('#link-top').prop('checked', false);

    //фиксированные видео на странице спора при прокрутке
    if ( $(this).scrollTop() > $(".fixed-el-top").height() ) {
        $(".fixed-el-top").addClass("fixed");
    } else  {
        $(".fixed-el-top").removeClass("fixed");
    }
});