JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<header class="site-header">Site Header</header>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content
</p><p>
content
</p><p>
content
</p><p>
content
</p><p>
content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>

CSS

.site-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #DFD;
  text-align: center;
  position: relative;
}
.site-header-nav-scrolled {
  position: fixed;
}

JavaScript

// Window Scroll
var windowScroll = function () {
    $(window).scroll(function () {

        var scrollPos = $(this).scrollTop();

        var system ={win : false,mac : false,xll : false};
        //¼ì²âƽ̨
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
        console.log(system);
        //ÅжÏƽ̨ÀàÐÍ
        if(system.win||system.mac||system.xll){
            if ($(window).scrollTop() > 70)
            {
                $('.site-header').addClass('site-header-nav-scrolled');
            } else {
                $('.site-header').removeClass('site-header-nav-scrolled');
            }
        }else{
            //Èç¹ûÊÇÊÖ»úÔò½«¶¥À¸ÒƳý½çÃæ
            if ($(window).scrollTop() > 40) 
            {
                $('.site-header').addClass('site-header-nav-scrolled-ph');
            } else {
                $('.site-header').removeClass('site-header-nav-scrolled-ph');
            }
        }
 });
};

$( document ).ready(function() {
    windowScroll();
});