Dropdown Sample

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="fixed-header">
    <div class="custom-dropdown">
      <div class="dropdown-title">
        Hover Me
      </div>
      <div class="dropdown-content">
        This is dropdown content
      </div>
    </div>
  </div>
</div>

CSS

.container {
  background-color: white;
  width: 100%;
  height: 1000px;
}

.fixed-header {
  background-color: lightgrey;
  position: fixed;
  top: 0;
  left: 0;
  padding: 14px;
  width: 100%;
  height: auto;
}

.custom-dropdown {
  position: relative;
}

.dropdown-title {
  display: inline-block;
  padding: 8px;
  border: 1px solid black;
}

.dropdown-content {
  background-color: white;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 8px;
  border: 1px solid darkgrey;
  width: auto;
  height: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dropdown-content.active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

JavaScript

$('.custom-dropdown').on('mouseenter', function(){
	$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
	$(this).children('.dropdown-content').removeClass('active');
})

$(window).scroll(function () {
	$('.custom-dropdown').trigger('mouseleave');
});