使用jQuery向下滚动后表格未固定在顶部 [英] Table not fixed on top after scroll down using jquery

问题描述

实际上，我在向下滚动后使用jquery来停止表，但这无法正常工作.有时它会振动，滚动后不会固定，但有时效果很好.

Actually i'm using jquery to stop table after scroll down but this is not working properly. Sometime its vibrating and not fixed after scroll but sometime work fine.

$(document).ready(function () {
        $(window).scroll(function () {
            if ($(document).scrollTop() > 200) {  $('.reportAction').addClass('reportActionFixed');
            }
            else {
                $('.reportAction').removeClass('reportActionFixed');
            }
        })
});

  .box{ height: 200px; }

.reportActionFixed{position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    background: #fff;
    padding: 0px;
    border-bottom: 1px solid #ccc;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="box"></div>

<table class="table reportAction">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>


<img src="https://flyflytravel.com/images/destinacije/maldivi/840x500/maldivi840x500.jpg">

如果我要更改scrollTop distance，则其工作正常，但在我给scrolltop 200时不起作用.有人可以修复它吗?

If i'm changing scrollTop distance then its working fine but not working while i give scrolltop 200. Anybody can fix it?

通过我在代码中使用的CSS使用最新的简单jquery.

By the way i'm using simple latest jquery with CSS as given in my code.

谢谢.

推荐答案

在CSS类reportActionFixed中创建position: sticky.而且，如果您不需要表格上方的空白，请在CSS类box中将height: 0px或将其完全删除.

Make position: sticky in the CSS class reportActionFixed. And if you don't need the white space above the table, then make height: 0px in CSS class box or remove it altogether.

这是一个小提琴.

这篇关于使用jQuery向下滚动后表格未固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！