javascript - 修复滚动条上的 div 底部

Question

我有以下 JS，当您向下滚动时，它会将右侧的菜单粘在顶部。我创建了 this使用此标记插入(您可能需要滚动以加宽预览窗 Eloquent 能并排查看列)。

window.addEventListener("scroll", handleScroll);

function handleScroll() {
  const $panel = $(".menu")[0];
  if ($(this).scrollTop() > 90) {
    $panel.classList.add("sticky");
  } else {
    $panel.classList.remove("sticky");
  }
}

.navbar {
  background-color: #fff;
  border-bottom: 1px solid;
  font-size: 48px;
  line-height: 48px;
  position: fixed;
}

.contents {
  margin-top: 55px;
}

.menu.sticky {
  bottom: 60px;
  right: 0;
  position: fixed;
  top: 55px;
  width: 31.491712707182323%;
}

.menu.sticky .tab-content {
  overflow: auto;
}

.menu .tab-content {
  padding: 20px;
}

.menu button {
  margin-top: 20px;
}

.btn.pull-right {
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-fixed-top">NAVBAR</div>
<div class="contents">
  <div class="row-fluid">
    <div class="span12">
      <h3>Here is some additional stuff</h3>
      <h5>And even more</h5>
    </div>
  </div>
  <div class="row-fluid">
    <div id="wrapper">
      <div class="span8" style="border: 1px solid blue;">
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
        <p>Some content</p>
      </div>
      <div class="span4" style="border: 1px solid red;">
        <div class="menu" style="border: 1px solid green;">
          <ul class="nav nav-tabs">
            <li><a href="#first" data-toggle="tab">First</a></li>
            <li><a href="#second" data-toggle="tab">Second</a></li>
          </ul>
          <div class="tab-content">
            <div id="first" class="tab-pane active">
              <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
              </ul>
            </div>
            <div id="second" class="tab-pane">Second tab contents</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <button class="btn pull-right">Button I don't want hidden</button>
    </div>
  </div>
</div>

我还想发生的是，当菜单卡住时，我希望该菜单中事件选项卡的内容可以滚动，可见窗口的底部标记可滚动区域的底部。它应该看起来像这样:

当您继续在页面上向下滚动时，我希望选项卡中可滚动区域的底部最终与父级的底部相匹配。它应该看起来像这样:

我不确定如何让选项卡内容可滚动以及设置 javascript 以适本地修复菜单底部。

Answer 1

像这样计算 scrollBottom 值:

$( document ).height() - ( $( window ).scrollTop() + $( window ).height() )

并将它与您想要留在底部的值进行比较，在我的 cas 中是 footer 的 .outerHeight() :

//get height + marfin + padding of footer
h = $("footer").outerHeight(true)

$(window).scroll(function() {
	
  //get scrollButtom
  var scrollButtom = $( document ).height()-($(window).scrollTop() + $(window).height());
	
  if (scrollButtom >= h) {
    $(".box").css('bottom','0');
  }

  //scroll top/down with a footer
  if (scrollButtom < h) {
  	$(".box").css('bottom',(h-scrollButtom)+'px');
	}
  
  
  //show & hide sidebar
  if($(window).scrollTop()>200){
    $(".box").css('opacity','1');
  }

  if ($(window).scrollTop() <= 200) {
  	$(".box").css('opacity','0');
	}
  
});

body{
  margin:0;
  padding:0;
}
.box{
  background:#f00;
  height:100px;
  width:100px;
  position:fixed;
  bottom:0;
  right:0;
  opacity:0;
}
.foo{
  height:600px;
  border:1px solid #000;
}
footer{
  background:#333;
  color:#ccc;
  height:150px;
  padding:20px;
  margin:10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<div class="box">
</div>
<div id="all">
  <div class="foo">Text</div>
  <div class="foo">Text</div>
  <div class="foo">Text</div>
  <div class="foo">Text</div>
  <div class="foo">Text</div>
</div>
<footer>
    I am a footer
</footer>