tiny space is created when dropdown gets affix

Question

A tiny space is created when mega drop down gets affix (i.e, sticky) when user scrolls the web page. How to fix it?

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });

  $("#flip1").click(function() {
    $("#panel1").slideToggle("slow");
  });
});

.affix {
  top: 0;
  width: 100%;
}

.navbar {
  border-width: 0px;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  background-color: rgba(0, 0, 0, 0.0);
  background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00)));
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
}

.navbar-default .navbar-nav>li>a {
  color: black;
}

.navbar-default .navbar-nav>.dropdown>a .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.navbar-default .navbar-brand {
  color: black;
}

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 0px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.megamenu>li>ul {
  padding: 0;
  margin: 0;
}

.megamenu>li>ul>li {
  list-style: none;
}

.megamenu>li>ul>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}

.megamenu>li ul>li>a,
.megamenu>li ul>li>a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.megamenu.disabled>a,
.megamenu.disabled>a,
.megamenu.disabled>a:focus {
  color: #999999;
}

.megamenu.disabled>a,
.megamenu.disabled>a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}

@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu>li {
    margin-bottom: 30px;
  }
  .megamenu>li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="flip1"> Product Listing <b class="caret"></b> </a>
          <ul class="dropdown-menu megamenu row" data-spy="affix" data-offset-top="197" id="panel1">
            <li>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
            </li>
          </ul>
        </li>

        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="flip">Categories <b class="caret"></b></a>
          <ul class="dropdown-menu megamenu row" data-spy="affix" data-offset-top="197" id="panel">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Glyphicons</li>
                <li><a href="#">Available glyphs</a></li>
                <li class="disabled"><a href="#">How to use</a></li>
                <li><a href="#">Examples</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdowns</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Aligninment options</a></li>
                <li><a href="#">Headers</a></li>
                <li><a href="#">Disabled menu items</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Button groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Button toolbar</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Nesting</a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Button dropdowns</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Input groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Checkboxes and radio addons</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Navs</li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Pills</a></li>
                <li><a href="#">Justified</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Navbar</li>
                <li><a href="#">Default navbar</a></li>
                <li><a href="#">Buttons</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Non-nav links</a></li>
                <li><a href="#">Component alignment</a></li>
                <li><a href="#">Fixed to top</a></li>
                <li><a href="#">Fixed to bottom</a></li>
                <li><a href="#">Static top</a></li>
                <li><a href="#">Inverted navbar</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<h1>Responsive Mega Dropdown</h1>
<h2>Responsive Mega Dropdown</h2>
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<h4>Responsive Mega Dropdown</h4>
<br />
<h5>Responsive Mega Dropdown</h5>
<h1>Responsive Mega Dropdown</h1>
<h2>Responsive Mega Dropdown</h2>
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<h4>Responsive Mega Dropdown</h4>
<br />
<h5>Responsive Mega Dropdown</h5>

<h1>Responsive Mega Dropdown</h1>
<h2>Responsive Mega Dropdown</h2>
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<h4>Responsive Mega Dropdown</h4>
<br />
<h5>Responsive Mega Dropdown</h5>

<h1>Responsive Mega Dropdown</h1>
<h2>Responsive Mega Dropdown</h2>
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<br />
<h1>Responsive Mega Dropdown</h1>
<br />
<h4>Responsive Mega Dropdown</h4>
<br />
<h5>Responsive Mega Dropdown</h5>

Answer 1

Based on what I was able to see when loading your code into my browser, the simplest way I found to fix it was to set top: -1px in your affix class, giving you .affix { top: -1px; width: 100%; }. This tells the browser to position the element one pixel beyond the top of the viewport, making sure that gap isn't present.

I wish I had a clear answer as to why 0px isn't working, as I firmly believe it should, but using -1px appears to address it without you actually losing any space in the menu.