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(){
        $('header, .products-nav').wrapAll('<div class="header-wrap">');
        var iScrollPos = 0;
        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            if($(this).scrollTop() >= 55) {
                $('.products-nav').addClass('products-nav-fixed'); //add2
            }
            else if ($(this).scrollTop() < 55){
//                $('.products-nav').removeClass('products-nav-fixed');//rem2
                $('.header-wrap').removeClass('header-wrap-fixed');//rem1
            }
            if ((iCurScrollPos < iScrollPos) &&  ($(this).scrollTop() >= 55)) {
                $('.header-wrap').addClass('header-wrap-fixed');//add1
                $('.products-nav').removeClass('products-nav-fixed');//rem2
            }
            else if (iCurScrollPos > iScrollPos){
                $('.header-wrap').removeClass('header-wrap-fixed');//rem1
            }
            var lastScrollTop = 0;
            iScrollPos = iCurScrollPos;
        });
    });