드롭 다운 메뉴 - 고정 속성

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; 

    } 

그리고 자바 스크립트 : 문제는

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