如何在隐藏固定div时使用可滚动div中的内容填充视区

<div id="scrollableDiv" style="height: 200px; overflow: auto;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Phasellus vitae accumsan neque. Duis nec est at est posuere venenatis sit amet nec sapien.</p>
  <p>Quisque volutpat scelerisque metus, nec posuere arcu volutpat eget.</p>
  <p>Etiam hendrerit mollis tempor. Aenean auctor velit at elit pharetra, at fermentum risus tincidunt.</p>
</div>

<div id="fixedDiv" style="display: none;">
  <!-- 填充可滚动div中的内容 -->
</div>

$(document).ready(function() {
  $('#scrollableDiv').scroll(function() {
    var scrollableHeight = $(this).outerHeight(); // 可滚动div的高度
    var scrollHeight = $(this)[0].scrollHeight; // 可滚动div内容的高度
    var scrollTop = $(this).scrollTop(); // 滚动位置

    if (scrollableHeight + scrollTop >= scrollHeight) {
      // 滚动到底部，显示固定div并填充内容
      $('#fixedDiv').css('display', 'block');
      $('#fixedDiv').html($(this).html()); // 将可滚动div中的内容填充到固定div中
    } else {
      $('#fixedDiv').css('display', 'none'); // 隐藏固定div
    }
  });
});