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

问题描述

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

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

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/

标签： jquerycsspositionsticky

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

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

产生这个结果：

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

问题描述

解决方案

推荐阅读