палка ребенка вниз, когда родительский div касается нижней части браузера

Question

Я хочу привязать дочерний div к нижней части, когда родительский div касается нижней части браузера.

P.S: Это должно произойти, когда родительский div не нажат вниз, когда прокручивается вниз.

Например, в моей демонстрации есть панель содержимого, которая скрыта. Если вы нажмете ссылку на расширение, вы увидите расширенный контент (который нажимает на bottom_content div внизу).

Но аккордеон - всего лишь пример, там будет какой-то другой элемент, который будет толкать div bottom_content. Поэтому я не хочу писать функцию stick со ссылкой на аккордеон.

Он должен приклеивать только тогда, когда bottom_content ДИВ касается нижней части браузера и когда нет много контента на странице, то ребенок ДИВ должен остаться, как это, как потомок bottom_content

Родителя DIV: bottom_content
Детские ДИВ: 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

Вся идея заключается в том, чтобы справиться с .footer позиции на window прокруткой, на window изменения размера и после .slideToggle() для список завершен:

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

вы можете сделать JS on.change, чтобы изменить это положение дел до абсолютной и снизу: 0 слева: 0