Overlay flickers when jQuery superfish menu is open

Question

I'm using the jQuery superfish menu and I need a slight body overlay color when a dropdown menu is open. My idea was to do this with a body:after element set to position fixed and the use jQuery to check the hover of the menu.

jQuery(document).ready(function($) {
 
 $('ul.sf-menu').superfish({
  delay:       200,                            // one second delay on mouseout
  animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
  speed:       300,                          // faster animation speed
  cssArrows:   false, 
  autoArrows:  false                            // disable generation of arrow mark-up
 });
 
/* My custom code */
 
  $(".sf-menu li a").hover(function(){
     $('body').addClass('dropdown-open');
 },function(){
     $('body').removeClass('dropdown-open');
 }); 
  
});

body:after {
    content: '';
    display: none;
    background-color: #000;
    position: fixed;
    z-index: 20;
    opacity: 0.1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 width: 100vw;
    height: 100vh;
}

body.dropdown-open:after {
 display: block;
}

Unfortunately this solution causes my overlay to flicker all the time. I guess the superfish plugin already has a built-in function when the dropdown is open. As I'm not a developer I was not able to find a solution for that.

Thanks for your help.