下拉菜單 - 固定屬性

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