creating a fixed header in an HTML table

In this section, I have a table and I am trying to keep the header fixed while scrolling.

JavaScript

<script>
$('#scroll').scroll(function(){
if ($('#scroll').scrollTop() > 10){
    $("thead").css({
            position: 'fixed',
            top: '68px'
        });
}else{
    $('thead').css({
        position: 'static'
    });
}
});
</script>

The functionality is working perfectly, but there seems to be a change in design.

Check out the live demo here

If anyone could provide assistance, it would be greatly appreciated.

Thank you in advance.

EDIT

View the fiddle here

jqueryhtmlcssfreeze

Answer №2

After researching how to create a fixed header, I discovered an helpful resource at .

I appreciate your assistance.

Answer №3

When you use Position: fixed, it will disregard all other elements on the page and position your element in relation to the browser window. Instead of this, consider using position: absolute and applying position: relative to the containing element of the table.

For example, check out this link: http://jsfiddle.net/QxW6v/1/

Answer №4

   <script>
$('#scroll').scroll(function(){
if ($('#scroll').scrollTop() > 10){
    $("thead").css({
            position: 'static',
            top: '68px'
        });
}else{
    $('thead').css({
        position: 'static'
    });
}
});
</script>

By implementing this code snippet, the header's position changes to fixed while scrolling, which in turn causes the observed issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

csshtml960.gs

Double tap problem with pseudo elements on iOS links

Trying to achieve a scrolling line effect beneath anchor links for a client project led me to attempt some CSS3 coding, only to find myself stuck with an elusive bug after spending hours on it. The issue arises on mobile devices (iOS and Android) where, up ...

htmlcss

Configuring a jQuery Ajax converter to parse JSON data

I'm having trouble converting ASP.NET dates to javascript dates when parsing JSON responses. Here is an example of the response structure: {"Id":1,"Title":null,"Description":null,"Content":null,"PropagateModel":false,"Status":0,"ComponentPublishDate ...

jqueryajaxjsonasp.net-mvc-3converters

I am seeking assistance with refining my responsive side menu code

I've been diligently working on my project for about a week now, but I've encountered a small yet incredibly frustrating issue that has me stumped. The problem lies in the functionality of the responsive sidemenu with multiple dropdowns that I ha ...

htmlcssbootstrap-5

ActAsList Gem failing to maintain proper order during saving process

I recently implemented the Acts As List Gem for dynamically reordering rows in a table by dragging them up or down. However, I'm facing an issue where if I drag and drop a row and then refresh the page, the row always gets placed at the top regardless ...

jqueryruby-on-railsrubylistsorting

Using a customizable approach in asp.net ajax for managing multiple slider controls

I have implemented an asp.net slider <asp:TextBox ID="sliderTwo" runat="server" Style="display: none;" /> <ajaxToolkit:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" BehaviorID="multiHandleSliderExtenderTwo" TargetCont ...

asp.nethtmlajaxslider

Obtain the value of the nth child in jQuery without referencing the HTML tag

I need to work with the number 1.99 in my calculations, but it is preceded by a dollar sign which is subject to change. $(function() { const x = $('#test').text(); console.log(x); console.log(Number(x) + Number(x)); }); <script src="https://cd ...

javascripthtmljquerywordpresswoocommerce

Creating a duplicate button and text field through a simple click on an existing replicated button in an Android environment

I am facing a unique challenge with my code that most developers I have consulted so far have struggled to resolve. Within my app, I aim to enable users to create new classes by simply clicking an "add new class" button. Upon doing so, an EditText field a ...

javaandroidjqueryandroid-edittext

The web service method is supposed to return JSON data, but when the response object is received in the callback function of my $

Presenting my custom Serialization class: public class JsonConverter { private StringBuilder json; public JsonConverter() { json = new StringBuilder(); } public JsonConverter AddObjectType(string className) { json ...

jqueryasp.netajax

Issue with Preloading

Is there a way to preload images in the slider using my current code? This is what I have: var uploader = $('#flashUploader').pluploadQueue(); uploader.bind('FileUploaded', function(up, file, response) { var obj = jQu ...

jquery

Issues with Knockout functionality due to retrieval of values from an external JSON file

Attempting to manipulate formulas in a spreadsheet-like fashion using knockout appears to be causing some issues with functionality. The data in question is sourced from an external Json file. Json file { "info": [ { "Name":"Newb ...

javascriptjqueryjsonknockout.jsgetjson

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Unsuccessful CSS integration with Django webpage

I have created a navigation bar using HTML and CSS, but I am having trouble getting the CSS to affect the HTML. I have checked my static files setup and tried various settings, but nothing seems to work. Any assistance would be greatly appreciated. As a be ...

htmlcsspython-3.xdjangodjango-3.0

Issues with Jquery UI Sortable functionality in WordPress websites

Being new to Wordpress, I am still familiarizing myself with where everything should be placed. In attempting to add Jquery-UI in the header using: <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> I have come across the ...

jquerywordpressjquery-ui-sortable

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

Using the jqueryRotate plugin to rotate an image by 90 degrees

Is there a way to rotate images on a webpage using the JQueryRotate script? I have 10 images that I want to be able to rotate when clicked, but I'm not sure how to implement it. Any assistance would be welcomed. This is the HTML code for the images: ...

javascriptjqueryhtmlrotation

Storing Javascript slider values in the database

Upon exploring various resources, I have not been able to find a solution to my query regarding JavaScript. As I am inexperienced in this area, I humbly seek assistance. Here is the issue at hand: I possess a form that incorporates a jQuery UI range slid ...

phpjqueryjquery-ui

Is there a way to automatically distribute a discount coupon if it is present in the URL?

My discount coupon system is fully operational and functions flawlessly. The information is sent via Ajax from the form below. <div class="form-group relative"> <div class="response"> <div class="success&q ...

phpjqueryajax

How can we ensure that an inline-block span inherits the text-decoration property from all of its ancestor elements?

I created an inline-block span inside u and s tags, hoping it would display with both strike-through and underline text decorations, but unfortunately, neither of them appeared. If I set its text-decoration to inherit, it will only inherit the text decora ...

css

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

javascriptandroidhtmlprogressive-web-apps