JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div id="productListNavigation-placeholder">
  <div id="productListNavigation">
    <ul class="categories" >
      <li  ><a title=" - NEW ARRIVALS"  id="new-arrivals" href="new-arrivals"  >NEW ARRIVALS</a> </li>
      <li class="current_item" ><a title=" - JEWELS"  id="jewels" href="jewels" class="current" >JEWELS<span class="category_arrow"></span></a>
        <ul class="categories_level_1" >
          <li  ><a title=" -NECKLACES"  id="jewels-necklaces" href="jewels-necklaces"  >NECKLACES</a> </li>
          <li  ><a title=" - EARRINGS"  id="jewels-earrings" href="jewels-earrings"  >EARRINGS</a> </li>
          <li  ><a title=" - RINGS"  id="jewels-rings" href="jewels-rings"  >RINGS</a> </li>
          <li  ><a title=" - BANGLES"  id="jewels-bangles" href="jewels-bangles"  >BANGLES</a> </li>
        </ul>
      </li>
      <li  ><a title=" - FINE"  id="fine-jewelry" href="fine-jewelry"  >FINE JEWELRY</a>
        <ul class="categories_level_1" >
          <li  ><a title=" - PERSONAL"  id="-personal" href="-personal"  > PERSONAL</a> </li>
          <li  ><a title=" - FINE NECKLACES"  id="fine-necklaces" href="fine-necklaces"  >NECKLACES</a> </li>
          <li  ><a title=" - FINE BANGLES"  id="fine-bangles" href="fine-bangles"  >BANGLES</a> </li>
        </ul>
      </li>
      <li  ><a title="ZODIAC"  id="zodiac" href="zodiac"  >ZODIAC</a>
        <ul class="categories_level_1" >
          <li  ><a title="NECKLACES"  id="z-necklaces" href="z-necklaces"  >NECKLACES</a> </li>
          <li  ><a title="BANGLES"  id="z-bangles" href="z-bangles"  >BANGLES</a> </li>
        </ul>
      </li>
      <li  ><a title=" -  BOUTIQUE"  id="-boutique" href="-boutique"  > BOUTIQUE</a>
        <ul class="categories_level_1" >
          <li  ><a title=" -  NECKLACES"  id="b-necklaces" href="b-necklaces"  >NECKLACES</a> </li>
          <li  ><a title=" -  RINGS"  id="b-rings" href="b-rings"  >RINGS</a> </li>
 
    </ul>
  </div>
</div>
<div id="container"></div>
    <div...

CSS

#container{ height:1000px;}
#footer{height:300px; background-color:red; }
#productListNavigation-placeholder{position:fixed; border:1px solid red;}

JavaScript

$(function(){
    var menu = $("#productListNavigation-placeholder");
    var menuOriginalTop = $(menu).position().top;
    
    $(window).scroll(function()
     {
      var scrollyTop = $(window).scrollTop();
      var footerTop = $("#footer").offset().top; 
      var menuTop = $(menu).position().top;
      var menuBottom = $(menu).offset().top + $(menu).height();
      var movement = (footerTop - scrollyTop) - ($(menu).position().top + $(menu).height());
         
         
         if(menuBottom >= footerTop)
         {
             // Moves menu up if it intersects the footer
            $(menu).css({top:$(menu).position().top + movement });
         }
         else if(menuTop < menuOriginalTop )
         {
             // Moves menu down if the menu is above the orginal position and menu is not intersecting the footer
             $(menu).css({top:$(menu).position().top+movement });
         }
         else if(menuTop > menuOriginalTop)
         {
             // if the menu get pulled to far down this will pull it back to the original position
              $(menu).css({top:menuOriginalTop });
         }
         
     });

});