JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<link rel="stylesheet" href="http://totaldesign.ir/demo/style.css">
<link rel="stylesheet" href="http://totaldesign.ir/demo/css/share.css">
<link rel="stylesheet" href="http://totaldesign.ir/demo/css/product.css">
<script src="http://totaldesign.ir/demo/js/transition.js"></script>
<script src="http://totaldesign.ir/demo/js/collapse.js"></script>
<script src="http://totaldesign.ir/demo/js/scrollspy.js"></script>
<script src="http://totaldesign.ir/demo/js/dropdown.js"></script>
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-header-menu">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        
      </div>
    
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse" id="header_nav">
          <p id="header_menu_logo"></p>
          <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" id="header_user_menu_search" placeholder="در اتیکت جستجو کنید...">
          </div>
        </form>
                <ul class="nav navbar-nav navbar-left">
          <li class="dropdown" id="header_user_avatar" id="h_shop_li">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i id="shop"></i></b></a>
            <ul class="dropdown-menu" id="header_user_menu">
              <div id="current_user"><img src="http://localhost/anaram/img/shop-icon-dg.png" id="user_avatar_header"><span id="user_realname">دی جی کالا</span></div>
              <li><a href="http://localhost/anaram/dashboard.php" id="h_dashborad">داشبورد</a></li>
     ...

JavaScript

var offsetHeight = 120;
     $('#p-menu').scrollspy({
      offset: offsetHeight
     });
      $("#p-menu a[href^='#']").click(function (event) {
      var scrollPos = $('body > #all').find($(this).attr('href')).offset().top - offsetHeight;
      $('body,html').animate({
          scrollTop: scrollPos
      }, 500, function () {
          $(".btn-navbar").click();
      });
      return false;
      });

 $(document).ready(function() {
      //change the integers below to match the height of your upper dive, which I called
      //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
      //to figure out what the scroll position is when exactly you want to fix the nav
      //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
      //you know the position.
      $(window).scroll(function () { 

        console.log($(window).scrollTop());

        if ($(window).scrollTop() > 90) {
          $('#p-menu').addClass('navbar-fixed-top p-menu-fixed-top');
        }

        if ($(window).scrollTop() < 90) {
          $('#p-menu').removeClass('navbar-fixed-top p-menu-fixed-top');
        }
      });
    });