부모 div가 브라우저 바닥에 닿으면 자식을 아래로 붙임

Question

부모 div가 브라우저 하단에 닿으면 하위 div를 아래쪽에 붙이고 싶습니다.

P .: 부모 div가 아래로 내리면 스크롤되지 않을 때 발생합니다.

예를 들어 내 데모에서는 숨겨진 내용 패널이 있습니다. 확장 링크를 클릭하면 펼쳐진 내용을 볼 수 있습니다 (bottom_content div를 아래쪽으로 밀어 넣음).

그러나 아코디언은 단지 예일 뿐이므로 bottom_content div를 밀어 넣을 다른 요소가있을 것입니다. 그래서 저는 아코디언을 참고로 스틱 기능을 쓰고 싶지 않습니다.

bottom_content 사업부가 브라우저의 바닥에 닿아 페이지에 더 많은 내용이없는 경우는 bottom_content

부모 DIV의 아이처럼 같이 다음 하위 사업부가 유지되어야 경우에만 아래 충실해야

: bottom_content
자식 DIV : 여기

footer 적절한 아닌 현재 사용 내 코드입니다

$('.expandble_conetnt a').click(function(event){ 
     event.preventDefault(); 
     $(this).next('span').slideToggle();  
    }); 

//this is for stick to the bottom 
var stickyHeaderbottom = $('.footer').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeaderbottom) { 
      $('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' }); 
     } else { 
      $('.footer').css({ position: 'static', bottom: '0px', width: '100%' }); 

     } 
    }); 

DEMO

Answer 1

전체 아이디어는 window 크기 조정과에 대한 .slideToggle() 후, window 스크롤에 .footer 위치를 처리하는 것입니다 목록 작성 완료 :

Fiddle.

var stickyHeaderbottom = $('.footer').offset().top; 

$('.expandble_conetnt a').click(function() 
{ 
    $(this).next('span').slideToggle(function() 
    { 
     handleBottom(); 
    }); 
    return false; 
}); 

$(window).scroll(function() 
{ 
    handleBottom(); 
}); 

$(window).resize(function() 
{ 
    handleBottom(); 
}); 

function handleBottom() 
{ 
    if ($(window).height() + $(window).scrollTop() < $(document).height()) 
    { 
     $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' }); 
    } 
    else 
    { 
     $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 }); 
    } 
} 

편집. Updated fiddle 목록 열기 후에 이상한 바닥 글없이 점프.

var stickyHeaderbottom = $('.footer').offset().top; 

$('.expandble_conetnt a').click(function() 
{ 
    var toggledElement = $(this).next('span'); 
    handleBottom(toggledElement.height()); 
    toggledElement.slideToggle(function() 
    { 
     handleBottom(); 
    }); 
    return false; 
}); 

$(window).scroll(function() 
{ 
    handleBottom(); 
}); 

$(window).resize(function() 
{ 
    handleBottom(); 
}); 

function handleBottom(additionalHeight) 
{ 
    var pageHeight = $(document).height(); 
    if (additionalHeight) 
    { 
     pageHeight += additionalHeight; 
    } 
    if ($(window).height() + $(window).scrollTop() < pageHeight) 
    { 
     $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' }); 
    } 
    else 
    { 
     $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 }); 
    } 
} 

Answer 2

당신이 그 DIV의 위치를 ​​변경 JS on.change 할 수 있습니다 절대 바닥 : 0 왼쪽 : 0