下拉菜單-固定屬性

Question

我在屏幕的中途有一個菜單。 它包含一些下拉菜單列表，並且當用戶滾動到某個點時，它會停留在頁面頂部。

<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>

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;

  }

和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"); 
        }
    });

問題是，菜單將其下的頁面向下推，除非菜單已正確固定在頁面頂部（一旦用戶滾動足夠遠）。

如何在不向下推頁面的情況下正確覆蓋菜單？

Answer 1

我接到你了。 我可以建議您有所不同。 我在某個地方做過。

js

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

700 =是您想將其固定在屏幕頂部時可以更改的值。

或兩節課

的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');
                }
            });