JSFiddle - React, Tailwind, and code Playground

by rus333

HTML

<div class="fixedBox">

     <div id="fixedBox">
 
            <div class="licat">  <p> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 1 </font> 
            </a>  </p> </div>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 2 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 3 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 4 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 5 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 6 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 7 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " > 
            <font size="3" >  &#9999; ссылка 8 </font> 
            </a> </div> </p>

            <p> <div class="licat"> <a href="#" title=" Посмотреть " >   
            <font size="3" >  &#9999; ссылка 9  </font> 
            </a> </div> </p>	
     </div>

</div>

CSS

.fixedBox {
	
   height: 0px; /* высота шапки */

   margin: 0px 140px; /* отсутп от края экрана ( верх низ, паво, дево ) */

   }


   #fixedBox {
		
   width: 200px;
	/* ширина */

   position: fixed;
	/* отступ сверху когда шапка видна полностью */
	
   margin-top: 20px;    /* величину отступа от верхнего края элемента. */

   background: rgba(105, 105, 105, 1) ;/* Цвет фона */  
   border-radius: 30px; /* Радиус углов блока */
   padding: 0px 20px; /* Поля вокруг текста */
   
}


  .licat:hover {
   width: 220px;
	/* ширина */
   background:rgba(139,71,38, 0.9);   /* цвет фона при наведении */
   border-radius: 20px; /* Радиус углов блока */
   padding: 20px 9px 20px 10px ; /* Поля вокруг текста */
   margin: 0px 0px 0px -20px; /* отсутп от края экрана ( верх низ, паво, дево ) */

   }

  .licat:hover a {
   color: White;   /* цвет ссылки при наведении */

   text-decoration: underline; /* Добавляем подчеркивание */
   }

   a {
    color: Black; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }

   a:visited {
    color: Black; /* Цвет посещённой ссылки */
   }

JavaScript

/* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */

   jQuery(document).ready(function(){
		
       function getScrollTop() {

                   var scrOfY = 0;
 
                   if( typeof( window.pageYOffset ) == "number" ) {

                            //Netscape compliant

                            scrOfY = window.pageYOffset;
	
                   } else if( document.body

                   && ( document.body.scrollLeft

                   || document.body.scrollTop ) ) {

                   //DOM compliant

                           scrOfY = document.body.scrollTop;

                   } else if( document.documentElement

                   && ( document.documentElement.scrollLeft

                   || document.documentElement.scrollTop ) ) {
	
                           //IE6 Strict
	   
                           scrOfY = document.documentElement.scrollTop;
	
                   }

                   return scrOfY;

       }

       /* пересчитываем отступ при прокрутке экрана */
	
       jQuery(window).scroll(function() {

            fixPaneRefresh();

        });


       function fixPaneRefresh(){

              if (jQuery("#fixedBox").length) {
	
                  var top  = getScrollTop();

                  if (top <225) jQuery("#fixedBox").css("margin-top",225-top+"px"); /* 170 - это наш отступ */
			

  else jQuery("#fixedBox").css("margin-top","0");

              }

      }



  });