滚动修复div底部

Question

我有以下JS，当你向下滚动时，它会将菜单右上角。我已经使用此标记创建了this Plunker（您可能需要滚动以扩大预览窗口以并排查看列。）

＆＃13;

＆＃13;

window.addEventListener("scroll", handleScroll);

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想要另外发生的是当菜单卡住时，我希望该菜单中活动标签的内容可滚动，可见窗口的底部标记可滚动区域的底部。它应该是这样的：

当您继续向下滚动页面时，我希望选项卡中可滚动区域的底部最终与父级的底部匹配。它应该是这样的：

我不确定如何让标签内容可滚动，以及设置javascript以正确修复菜单底部。

Answer 1

像这样计算scrollBottom值：

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

并将其与您想要留在底部的值进行比较，在我的.outerHeight()的{​​{1}}中：

footer

//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;
}

Answer 2

首先，您可以删除javascript并使用css

position: sticky

所有浏览器都支持。而polyfills是avaliables。

查看此演示：

https://philipwalton.github.io/polyfill/demos/position-sticky/

可能你必须减小窗口的大小才能看到完整的效果（侧边栏粘在上面，到达页面和页面，滚动自己）。