Question

我有下一个布局，主要高度为min-height 100%，这样至少在用户向下滚动时才看不到页脚。

取决于动态数据，内容或侧边栏的高度是否可以大于视口的100％。

如果内容太大，我希望用户始终看到侧边栏，因此我想要一个“粘性”侧边栏，但是它可能比视口高，因此，如果我设置position: sticky; top:0，则用户看不到最后一个边栏中的选项，至少用户可以到达页面底部。

问题是侧边栏AND内容太长。

我的目标是

1）如果用户向下滚动（在长选项卡上），则侧边栏滚动直到用户到达侧边栏的底部，然后侧边栏将粘在底部。（例如position: sticky; bottom:0）

2）如果用户向上滚动，则侧边栏将向上滚动直到到达侧边栏的顶部，然后粘贴在顶部。（例如position: sticky; top:0）

简而言之，侧边栏跟随主滚动条的上下限。

我正在使用最新的JQuery和Bootstrap。

最初，我将补充工具栏设置为position: block，如果标签很长，则看不到补充工具栏。在下一个代码段中，我将其配置为position: sticky; top:0进行演示，我认为我需要使用JavaScript，但实际上不知道如何启动此代码。

PD：我建议在全屏模式下查看摘要。
PD2：如果拼写错误或不清楚，请发表评论，我不是英语母语人士。

// THIS IS FOR THIS EXAMPLE
let longtab_number = 30;
let sidebar_number = 14;

$(function() {
  for (i = 0; i < longtab_number; i++) {
    $('#tab-1').append('<p class="e">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet egestas orci ut bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque non enim eu sem fermentum commodo. Ut viverra sagittis lorem</p>');
  }
  for (i = 0; i < sidebar_number; i++) {
    $('.menu-left').append('<a class="e" href="#">Placeholder</a>');
  }
  
  $('#mb').on('click',function(){$('.menu-left').append('<a class="e"  href="#">Placeholder</a>')});
  $('#lb').on('click',function(){$(".menu-left a.e:last-child").remove()});
  $('#mc').on('click',function(){$('#tab-1').append('<p class="e">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet egestas orci ut bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque non enim eu sem fermentum commodo. Ut viverra sagittis lorem</p>');});
  $('#lc').on('click',function(){$("#tab-1 p.e:last-child").remove()});
});

html,
body {
  height: 100%;
}

body {
  /* min-width: 800px; */
}

header {
  color: white;
  padding: 30px 0;
  text-align: center;
  height: 110px;
}

main {
  min-height: 100%;
  margin-top: -110px;
  padding-top: 110px;
  padding-left: 175px;
  width: 100%;
  display: flex !important;
  background-color: blue;
}

main .menu {
  width: 175px;
  margin-left: -175px;
  background: cyan;
}

.menu-left {
  border-bottom: none;
  padding-top: 2px;
  border-right: 0;
  position: sticky;
  top: 0;
}

.menu-left>div.divider {
  background-color: midnightblue;
  padding: 8px 10px 8px 5px;
  color: white;
}

.menu-left>a {
  margin-right: 0;
  display: block;
  color: white;
  border: 0;
  border-radius: 0;
  height: 100%;
  width: 100%;
  padding: .5rem 1rem;
}

.menu-left>div,
.menu-left>a {
  float: none;
  background: mediumblue;
  margin-bottom: 6px;
  min-height: 40px;
  display: block;
}

main .tabs {
  width: 100%;
  float: left;
  padding-left: 10px;
  background-color: #F2F2F2;
}

footer {
  background: black !important;
  color: white;
  padding: 30px 0;
  text-align: center;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<body>
  <header>
    HEADER
  </header>
  <main>
    <div class="menu">
      <div class="nav nav-tabs flex-column menu-left" role="tablist" aria-orientation="vertical">
        <div class="divider" role="separator">Divider</div>
        <a href="#tab-1" data-toggle="tab">Tab Long</a>
        <a href="#tab-2" data-toggle="tab">Tab Short</a>
        <div class="divider" role="separator">More tabs</div>
        <!-- Here will insert a lot of placeholder-->
      </div>
    </div>
    <div class="tabs">
      <div class="tab-content mt-3 mb-5">
        <button class="btn btn-primary btn-sm" id='mb'>More buttons</button>
        <button class="btn btn-primary btn-sm" id='lb'>Less buttons</button>
        <button class="btn btn-warning btn-sm" id='mc'>More content</button>
        <button class="btn btn-warning btn-sm" id='lc'>Less content</button>
        <div class="tab-pane active" id="tab-1">
          <p> A very loong content </p>
          <!-- Here will insert a lot of Lorem Ipsum-->
        </div>
        <div class="tab-pane" id="tab-2">
          <p>Short tab</p>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </main>
  <footer>
    Foooter
  </footer>
</body>

侧栏跟随滚动，但限制顶部和底部

0 个答案: