下拉菜单 - 固定属性

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