JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 please scroll down 
</p>
<ul class="nav navbar-nav top-menu top-menu-categories">

     <!-- New Element with class logolink -->      
      <li class="ct_29 lev-1 logolink">
       <a href="http://its-skin.upgates.com/" class="TopMenuLink logoimage">
         <img src="http://static.its-skin.upgates.com/m/m57daee4256187-sublogo.png" class="logoimage" />                   
       </a>
       </li>
       <li class="ct_29 lev-1" data-target-category="29">
       <a href="http://its-skin.upgates.com/krasa-it-s-skin" class="TopMenuLink">
       Krása It's Skin
       </a>
       </li>
      </ul>

CSS

body{font-family:Arial,'sans-serif'}
a{text-decoration:none}

.logolink { opacity:0;}

.logoimage{height:18px}

ul{
  list-style-type:none;
  margin-top:1300px;
  margin-bottom:1000px;
  font-size:18px;
}

li{
  display:inline-block;
  margin: 10px;
  border:1px solid #ccc;
}

JavaScript

$(function() {
    $(window).scroll( function(){
        $('.logolink').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            bottom_of_window = bottom_of_window + 50;  
          
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},3000);
            }
        }); 

    });
});