JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

<div class="header">header</div>
<br>
<br>
<div class="content">
  <div class= "left_side">left_side</div>
  <div class="center_side">center_side</div>
</div>

<div class="seen_goods">seen_goods</div>

CSS

.header{
  background-color: #ffff99;
  margin: 0 auto 0;
    width: 560px;
    height: 70px;
    position: fixed;
    z-index: 1000;
}

.fixedblockLeftSide {
  position: fixed;
  z-index: 1000;
  top: -22px;
}


.seen_goods{
  background-color: #dddf99;
  margin: 0 auto 0;
    width: 960px;
    height: 70px
}

.left_side{
  background-color: #aadf99;
  margin: 100px auto 0 5px;
  left: 50px;
    width: 160px;
    height: 170px
}

.center_side{
  background-color: #ccdf99;
  margin: -170px 165px 0;
    width: 400px;
    height: 570px
}

JavaScript

$(window).scroll(function(){
        var seenScrollSpace = $('.seenScroll').offset();
        var contentSpace = $('.content').offset().top;
        var left_sideHeight = $('.left_side').height();
        var parentLeftSideHeight = $('.content').height();
        console.log('left_sideHeight', left_sideHeight, 'content', contentSpace, 'parentLeftSideHeight', parentLeftSideHeight);

        var bo = $(window).scrollTop();
        if (bo > 66) {
            $('.left_side').addClass('fixedblockLeftSide');
        } else {
            $('.left_side').removeClass('fixedblockLeftSide');
        }
    });