JSFiddle - React, Tailwind, and code Playground

by vi161

HTML

<header>
    <div class="header-left"></div>
    <div class="header-right"></div>
    <nav class="header-nav">
        <div class="header-nav__container">
            <div class="header-nav__logo">
                <a class="header-nav__logo1" href="">
                    <img src="images/ens_logo.png" alt="ens">
                </a>
                <a class="header-nav__logo2" href="">
                    <img src="images/letmedical_white-small.png" alt="let medical">
                </a>
            </div>
            <div class="header-nav__wrap">
                <b >R&D Products</b>
                <a href="#">About Technology</a>
                <a href="#">History</a>
                <a href="#">About Us</a>
                <div class="header-nav__lang-wrap">
                    <a class="header-nav__lang" href="#">en</a>
                    <a class="header-nav__lang" href="#">ru</a>
                </div>
            </div>
        </div>
    </nav>
</header>

<nav class="products-nav">
    <div class="products-nav__container">
        <div class="products-nav__left">
            <a href="#">ENS</a>
        </div>
        <div class="products-nav__right">
            <a href="#">Technology</a>
            <a href="#">Indication</a>
            <a href="#">Control</a>
            <a href="#">Readings</a>
            <a href="#">Electrodes</a>
            <a href="#">Main features</a>
            <a href="#">Accessories</a>
        </div>
    </div>
</nav>

<div class="content">
    <div class="content__container">
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        <p>lorem ipsum lorem ipsum...

SCSS

//----------переменные------------
$lg-container:1060px;
$md-container:970px;
$sm-container:750px;
$xs-container:auto;

$header-height:55px;

//------------расширения-------------
.width-lg{
  max-width: 100%;
  width: $lg-container;
}
.font-MYRIADPRO-LIGHT{
  font-family: MYRIADPRO-LIGHT,Myriad Pro, Arial, Helvetica, sans-serif;
}
//-------------------------------------
@font-face {
  font-family: MYRIADPRO-LIGHT;
  src: url('../fonts/MYRIADPRO-LIGHT.OTF');
}

@font-face {
  font-family: myriadprolightTTF;
  src: url('../fonts/myriadprolight.ttf');
}

@font-face {
  font-family: MYRIADPRO-REGULAR;
  src: url('../fonts/MYRIADPRO-REGULAR.OTF');
}


body{
  margin: 0;
  @extend .font-MYRIADPRO-LIGHT;
}
header, .products-nav, .content{
  width:100%;
  @extend .width-lg;
  margin: 0 auto;
}
.header-nav, .products-nav__container, .content__container{
  @extend .width-lg;
  margin: 0 auto;
}
header{
  height: $header-height;
  position: relative;
//  transition: top 1s;
//  top:-55px;
}
.header-left{
  position: absolute;
  float: left;
  z-index: 1;
  width: 25%;
  height: 100%;
  background-color: #556B2F;
}
.header-nav{
  z-index: 10;
  position: relative;
  background-color: white;
  height: $header-height;
}
.header-nav__container {
  margin:0 auto;
  display: flex;
  align-items:center;
  justify-content:space-between;
}
.header-nav__logo{
  background-color: #556B2F;
  display: flex;
  padding-left: 23px;
  .header-nav__logo1, .header-nav__logo2{
    height: $header-height;
    display: inline-flex;
    align-items: center;
  }
  .header-nav__logo1{
    padding-right: 21px;
    border-right: 2px solid white;
  }
  .header-nav__logo2{
    padding-left: 17px;
    padding-right: 16px;
  }
}
.header-nav__wrap{
  display: flex;
  align-items: center;
  padding-right: 18px;
  justify-content: space-between;
  width: 59%;
  a, b{
    font-size: 20px;
    color: #111;
    text-decoration: none;
  }
  b{
    font-weight: 800;
  }
  a:hover{
    color: #06F;
 ...

JavaScript

$(function(){
        $(window).scroll(function() {
            if($(this).scrollTop() >= 55) {
                $('.products-nav').addClass('products-nav-fixed');
                $('header').css({'top' : '-55px'});
            }
            else{
                $('.products-nav').removeClass('products-nav-fixed');
            }
            var lastScrollTop = 0;
        });
        var iScrollPos = 0;

        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            if (iCurScrollPos > iScrollPos) {
                $('header').removeClass('header-fixed');
                $('.products-nav').removeClass('products-nav-fixed2');

            } else {
                $('header').css({'top' : '0px'});
                $('header').addClass('header-fixed');
                $('.products-nav').addClass('products-nav-fixed2');
            }
            iScrollPos = iCurScrollPos;
        });
    });