표가 스크롤에 고정된다 아래로

Question

이것은 내가 일하고 페이지의 예입니다 페이지 아래로. 그것을 성취 할 수있는 가장 좋은 방법을 말해 줄 수 있습니까?

기본적으로 페이지가 div가되면 클래스가 고정되는 example을 보았습니다. 내 케이스는 비슷하지만이 example 에서처럼 메뉴가 고정되어 있지 않아야합니다.

Answer 1

다른 예제를 살펴보면서 나는 당신을 위해 그것을 처리하는 자바 스크립트를 배치했습니다. 그들은 jQuery를 사용합니다. 여기에 코드입니다, 죄송이 길어 :

/* 
* 
* Fold/unfold header 
* 
*/ 
var snapped = false; 
function fixHeader(){ 
    $('#headercontainer, body').addClass('fixed') 
} 


function headerUnfold(){ 
    $("header").animate({ 
     "height" : 157 
    },300, "swing"); 


    //if header is fixed 
    if($('body.fixed').length && !snapped){ 
     $('#content').animate({ 
      'margin-top' : 185 
     },300, "swing"); 
    } 
    if($('body.fixed').length && snapped){ 
     $('#submenucontainer').animate({ 
      'margin-top' : 90 
     },300, "swing"); 
    } 


    $("nav, #menu_aux").fadeIn('fast'); 
    $("#menuback").hide(); 
    $("header").bind('mouseleave' , function(){ 
     headerFold(true); 
    }) 
    } 

    function headerFold(animate){ 
    $("header").unbind('mouseleave'); 
    if(animate){ 
     time = 300; 
    }else{ 
     time = 0; 
    } 
    $("header").animate({ 
     "height" : 65 
    },time, "swing") 

    //if header is fixed 
    if($('body.fixed').length && !snapped){ 
     $('#content').animate({ 
      'margin-top' : 80 
     },300, "swing"); 
    } 

    if($('body.fixed').length && snapped){ 
     $('#submenucontainer').animate({ 
      'margin-top' : 0 
     },300, "swing"); 
    } 


    if(animate){ 
     $("nav, #menu_aux").fadeOut('fast'); 
    }else{ 
     $("nav, #menu_aux").hide(); 
    } 

    $("#menuback").css({ 
     "left" : -10 
    }).show().animate({ 
     "left" : 20 
    },time) 
    } 

    $("#menuback").bind('mouseenter', function(){ 
    headerUnfold(); 
    }) 

그냥 당신이 ID submenucontainer에 대한 효과를 원하는 요소를 확인합니다. JS here it is에 대한 직접 링크가 필요한 경우