Dropdown Menu - Fixed Properties

Question

I have a menu about half-way down the screen. It contains some drop-down menu lists, and when a user scrolls past a certain point, it sticks to the top of the page.

<div class="discover_filter ">
    <div class="filter1">
        <p class="menuitem">Type</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Location</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Industry</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Featured</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
</div>

The CSS:

.discover_filter {
  width: 980px%;
  height: 50px;
  background-color: #ea8f18;
  padding: 0 40px;
}

.stick {
  position: fixed;
  top: 103px;
  z-index: 9999;
  width:980px;
}

.filter1 {
  float: left;

  z-index:9999;
  cursor: pointer;  
  height:50px;
  background-color:#ea8f18;
  width: 170px;
  color: white;
  overflow: hidden;

  .menuitem {
    font-weight: bold;
    display:block;
    height:20px; width: 150px; 
    padding: 15px 10px;
    font-size: 15pt;

  }

And the Javascript:

$('.filter1').hover(function() {
        $(this).animate({ 'height': '400px' }, 250);
    }, function() {
        $(this).animate({ 'height': '50px' }, 250);
    });

    var s = $(".discover_filter");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= 400) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });

The problem is, the menus push down the page below it, except when the menu has been properly fixed to the top of the page (once the user has scrolled far enough).

How can I make the menus overlay properly without pushing the page down?

Answer 1

I got you. I can suggest you something different. I did it somewhere.

js

$(document).on("scroll", function () {
            if ($(document).scrollTop() > "700") {
                $(".nav_class").css({ "position": "relative" });
            }
            else {
                $(".nav_class").css({ "position": "fixed"});
            }
        });

700 = is the value you can change when you like to fix it on top of your screen.

or make two classes

CSS

.class_a
{
position:relative;
}

.class_b
{
position:fixed;
top:0; /*to fix it on top*/
}

JS

$(document).on("scroll", function () {
                if ($(document).scrollTop() > "700") {
                    $(".nav_class").removeClass('class_a');
                }
                else {
                    $(".nav_class").addClass('class_b');
                }
            });