CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rohit Verma
Rohit Verma

Reputation: 3785

Table not fixed on top after scroll down using 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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>


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

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

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

Thanks in advance.

Upvotes: 0

Views: 405

Answers (1)

Waleed Iqbal
Waleed Iqbal

Reputation: 1322

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.

Here is a fiddle.

Upvotes: 3

Related Questions