FixedHeader 및 고정 메뉴 모음

Question

저는이 문제를 너무 오랫동안 고쳤습니다. 그래서 여기서 질문을 드리겠습니다. 웹 페이지 상단에 메뉴 막대를 표시하려고합니다. 내 접근 방식의 문제점은 콘텐츠 페이지가 메뉴 모음 뒤에서 스크롤되어 DataTable/FixedHeader에 문제가 발생한다는 것입니다. 메뉴에서 표 머리글을 멈추지 않고 메뉴 상단으로 스크롤하여 화면 상단에 잠급니다. .

CSS를이

#header { 
    width:100%; 
    height:50px; 
    position: fixed; 
    top:0; 
    background-color:rgba(255,0,0,0.5); 
} 


#content { 
    background-color:rgba(0,0,255,0.5); 
    position: static; 
    margin-top: 50px; 
} 

처럼 보이는 내가 표가 모든 방법을 스크롤하고 헤더 메뉴 아래 중지 중지 할 수있는 일이 있나요?

Answer 1

DataTable/FixedHeader 문서에서 대답을 찾을 수있을 것 같습니다. 당신이 여기에서 볼 수 있듯이, 당신은 specify the following 할 수 있습니다

offsetTop가 고정 된 헤더 경우가 스크롤 할 때에 잠겨 창 상단에서 오프셋을 지정합니다. 예를 들어 Twitter Bootstrap 고정 메뉴와 같이 페이지 상단에 고정 요소로 작업하는 에 유용합니다.

$(document).ready(function() { 
    var oTable = $('#example').dataTable(); 
    new FixedHeader(table, { 
     "offsetTop": 40 
    }); 
}); 

변경

메뉴 바 (50)의 높이로 offsetTop, 당신은 모든 설정해야합니다!

또한 을 #header에 추가하여 다른 요소의 "맨 위에"오도록 할 수 있습니다.

#header { 
    z-index: 9999; 
    /* And your other properties here */ 
}