JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="sq-pads">
                       <ul>
                               <li>
                                       <a href="#"><i class="material-icons md-48">home</i>
                                              <span id="show">Главная</span>
                                            <div class="caption">Главная</div>
                                       </a>
                               </li>
                               <li>
                                      <a href="#"><i class="material-icons md-48">settings</i>
                                              <span>Продукция</span>
                                          <div class="caption">Продукция</div>
                                       </a>
                               </li>
                               <li>
                                       <a href="#"><i class="material-icons md-48">autorenew</i>
                                              <span>Новости</span>
                                           <div class="caption">Новости</div>
                                       </a>
                               </li>
                               <li>
                                       <a href="#"><i class="material-icons md-48">perm_identity</i>
                                              <span>Контакты</span>
                                           <div class="caption">Контакты</div>
                                       </a>
                               </li>
                       </ul>
               ...

CSS

.sq-pads ul li a span {
    font: 50px "Dosis", sans-serif; text-transform: uppercase;
    position: absolute; left: 134px; top: 3px;
    display: none;
}
.nohover.sq-pads ul li a:hover span {
    display: none;
}
.sq-pads ul li a:hover span {
    display: block;
}

JavaScript

$(window).scroll(function () {
    console.log($(window).scrollTop(),$(window).height())
    if ($(window).scrollTop() > 50) {
                $('.sq-pads').addClass('nohover');
    } else  {
        $('.sq-pads').removeClass('nohover');
    }
});