동적 헤더 바/네비게이션 바는

Question

이봐 등 여기에 본 헤더 막대로 동적 헤더/탐색 모음을 만들려고 메신저

$(document).ready(function() { 
var lock = $('#header').position().top; 
$(window).scroll(function() { 
    if(lock >= $(window).scrollTop()) { 
     if($('#header').hasClass('fixed')) { 
      $('#header').removeClass('fixed'); 
     } 
    } else { 
     if(!$('#header').hasClass('fixed')) { 
      $('#header').addClass('fixed'); 
     } 
    } 
}); 
}); 

HTML :

<div id="header" class=""></div> 

CSS는 :

#header { 
width: 100%; 
height: 80px; 
background-color: #000; 
left:0; 
right: 0; 
margin-top: 340px; 
position: absolute;} 

body { 
height: 7000px; 
width: 100%; 
float: right;} 
.fixed { 
position: fixed;} 

도움이 될 것입니다.

Answer 1

스크롤에 앵커가 붙어있는 끈적 거리는 메니큐가 필요하십니까? 여기

는 그것을위한 스크립트입니다

$(function() { 
    var move = function() { 
     var st = $(window).scrollTop(); 
     var ot = $("#scroller-anchor").offset().top; 
     var s = $("#scroller"); 
     if(st > ot) { 
      s.css({ 
       position: "fixed", 

      }); 
     } else { 
      if(st <= ot) { 
       s.css({ 
        position: "relative", 

       }); 
      } 
     } 
    }; 
    $(window).scroll(move); 
    move(); 
}); 

그리고 당신은 당신의 HTML이를 추가해야합니다

<div id="scroller-anchor></div> 
    <div id="scroller"> 
    YOUR MENU HTML HERE 
    </div> 

UPDATE

여기 jsFiddle 작업 : D

추신 : 또한, 배경색이 위에 붙어있을 때 배경색을 변경하지 않으려면 원하는 배경색으로 "background-color": "red" 만 변경하면됩니다.