表格的粘性按钮宽度，位于页脚上方答案

【问题标题】：Sticky button width of table, sits above footer表格的粘性按钮宽度，位于页脚上方
【发布时间】：2020-01-09 13:03:29
【问题描述】：

我在表格中有一个按钮，我想粘在屏幕底部，当页脚出现在页脚上方时滚动。按钮也必须与表格的宽度相匹配

我有按钮可以粘在页面底部并在它出现时位于页脚上方，但无法获得与表格匹配的宽度，只有当它位于页脚时

https://codepen.io/ryannewell/pen/mdbparX

<body>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
.sidebar {
  height: 300px;
  background-color: black;
}
.table {
  height: 600px;
  width: 600px!important;
  background-color: grey;
  margin-bottom: 0px;
}

.footer {
  background-color:#26272b;
  padding:45px 0 20px;
  height: 40px;
  width: 100%;
}

.sub-btn-fixed {
    position: fixed; 
    width: 100%!important;
    margin:auto; 
    left: 0;
    right: 0;
    bottom:0; 
    height: 45px;
    background: red center top repeat-x scroll;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1030;
    border: none;
    }
</style>

<div class="container">

    <div class="row">
      <div class="col-md-3 col-sm-6 sidebar">
        <p>Sidebar</p>
      </div>
      <div class="col-md-9 col-sm-6 table">
        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td><button class="sub-btn-fixed">Submit</button></td>
          </tr>        
        </table>

      </div>
    </div>

</div><!-- /container -->

<footer class="footer"></footer>

<script>
     $(".sub-btn-fixed").css({'width':($(".table").width()+'px')});

    function checkOffset() {
      if ($('.sub-btn-fixed').offset().top + $('.sub-btn-fixed').height() >= 

    $('.footer').offset().top - 10) $('.sub-btn-fixed').css('position', 'absolute');
          if ($(document).scrollTop() + window.innerHeight < $('.footer').offset().top) $('.sub-btn-fixed').css('position', 'fixed'); // restore when you scroll up
    }
    $(document).scroll(function() {
      checkOffset();
    });
</script>
</body>

按钮应该是表格的宽度，但应该是屏幕的 100% 宽度，除非它位于页脚上方

这个问题的 JSFiddle：https://jsfiddle.net/4fm1rx7v/

【问题讨论】：

标签： jquery css position sticky

【解决方案1】：

从.sub-btn-fixed CSS 中删除position: fixed;，如下所示：

.sidebar {
  height: 300px;
  background-color: black;
}
.table {
  height: 600px;
  width: 600px!important;
  background-color: grey;
  margin-bottom: 0px;
}

.footer {
  background-color:#26272b;
  padding:45px 0 20px;
  height: 40px;
  width: 100%;
}

.sub-btn-fixed {
    width: 100%!important;
    margin:auto; 
    left: 0;
    right: 0;
    bottom:0; 
    height: 45px;
    background: red center top repeat-x scroll;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1030;
    border: none;
    }

此外，将colspan="3" 属性添加到 HTML 中，如下所示：

<div class="container">

    <div class="row">
      <div class="col-md-3 col-sm-6 sidebar">
        <p>Sidebar</p>
      </div>
      <div class="col-md-9 col-sm-6 table">
        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr >
            <td colspan="3"><button class="sub-btn-fixed">Submit</button></td>
          </tr>        
        </table>

      </div>
    </div>

</div><!-- /container -->

<footer class="footer"></footer>

</body>

产生这个结果：

【讨论】：

谢谢@ekbrothers。我进行了这些更改，最初在第一次滚动时它可以正常工作，但随后会变为 100% 的屏幕宽度，直到完全滚动到页面底部。我正在寻找提交按钮始终是表格的 100% 宽度。