Tips for ensuring a cloned table header remains fixed when scrolling through a page

Check out my code snippet on Pastebin: http://pastebin.com/pUstKXJz

I'm trying to make a sticky header that stays at the top of the page when I scroll past 100 pixels. The current JQuery code I have isn't working properly, so I need help modifying it.

The code for the sticky header is currently commented out because it's not functioning as expected.

If anyone can provide assistance in resolving this issue, I would greatly appreciate it.

Take a look at the image below:

Once the problem is fixed, the output should look like the example displayed here:

javascriptjqueryhtmlcss

Answer №1

To properly display the content within your table, you will need to take the 

<tr class="showOnlyAfterScroll">..</tr>
element out of the current table and enclose it in a new table right before the existing 
<table class="tblPrint">..</table>
. Additionally, be sure to assign the "showOnlyAfterScroll" class to the new <table> tag instead of the <tr>, as shown below:

<!--your new table-->
<table class="tblPrint showOnlyAfterScroll">
    <tbody>
        <tr class="mainTR">...</tr>
    </tbody>
</table>

<!--your current table-->
<table class="tblPrint">
    <tbody>...etc

Then, include the following CSS styles:

.showOnlyAfterScroll{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Lastly, adjust the width percentages of all five columns so they match in both tables:

.mainTR > th:nth-child(1){ width: 15%; }
.mainTR > th:nth-child(2){ width: 15%; }
.mainTR > th:nth-child(3){ width: 20%; }
.mainTR > th:nth-child(4){ width: 30%; }
.mainTR > th:nth-child(5){ width: 20%; }

Ensure that the total sum of column widths equals 100%.

I trust these instructions are clear and helpful!

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

Utilizing D3 to fetch geographic data in the form of a TopoJSON file for U.S. counties

After retrieving a set of coordinates, the goal is to use D3 to find the corresponding county from a U.S. TopoJSON file. Here is an example code snippet: navigator.geolocation.getCurrentPosition(function(position) { let coordinates: [number, number] = [p ...

javascripttypescriptd3.jsgeolocationtopojson

What is the best way to display multiple HTML files using React?

Looking to develop a web application using React that consists of multiple HTML pages. For instance, login.html and index.html have been created and linked to URIs through the backend - resulting in localhost:8080/login and localhost:8080/index. However, R ...

htmltypescriptreact-nativejsxtsx

What is the best way to set up configurations for node modules?

I have a module called mymodule which includes configuration options such as foo, bar, and two functions named f1 and f2. My goal is to initialize this module with default values in one client application, while passing different defaults in another clien ...

javascriptnode.js

Angular JS: Changing Byte Array into an HTML File

I created an HTML file using ASPOSE workbook and stored it in a memory stream in C#. Now, I am trying to show this HTML file in an Angular JS environment within the Div element. C# Snippet: wb.Save(htmlMemoryStream, new HtmlSaveOptions() { IsExportComment ...

htmlarraysangularjstype-conversion

A sophisticated method for retrieving the source object that Box3 was initialized with, to facilitate straightforward camera collision detection in Three.js

Is there a more efficient method to retrieve the original object used to set a Box3 (using Box.setFromObject) once the Box3 detects a collision? Currently, I am storing the Box3 in an array and then adding the object that was initially used to create the ...

javascriptthree.js

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

There seems to be a misunderstanding or error on my part regarding POST and GET requests based on what I've read online. On myNumber.ejs, I have a submit form. Upon submission, the view switches to Add.ejs. The goal is for Add.ejs to display both the ...

javascripthtmlnode.jsexpress

Disabling eventListener upon the occurrence of another event is ineffective

I am having trouble with two functions in my app that create different HTML structures. I want to close the info button event when the menu_div button is clicked, and vice versa. Can anyone provide some help? const menu_div = document.createElement("butt ...

javascriptevents

Avoid using jQuery when implementing a new form

Consider a scenario where you have an input field: <input type="text" id="smth" value="" /> and you are using jQuery to send this data to a .php file. $("#submit_button").click(function() { var info = {}; info['smth'] = $(& ...

phpjqueryhtml

Voting Dynamics in Django: Ordering by Popular Vote

There is a lot of existing documentation on this topic, but so far, none of the solutions have worked for me. As the title suggests, my goal is to sort a set of objects using Django Voting based on the number of votes they have (from high to low). I have a ...

pythonhtmldjango

Get the input tag's value prior to submitting the form

After the user enters a number into an input tag in my HTML code, I need to immediately retrieve that value for mathematical calculations. I intend to use the "onchange" form event to trigger a PHP function responsible for performing the calculation before ...

phphtmlforms

How to use bootstrap to resize and center a div element

I'm struggling with formatting a form that is enclosed in a bordered fieldset. Currently, all the form fields are filling the entire width of the fieldset. However, I want certain textfields to be shorter and centered within the fieldset. I have attem ...

csstwitter-bootstrap

Is there a potential problem with unescaped characters in an HTML field within a JSON response?

Imagine an API returns a JSON response as shown below: {"error":"","data":"example_html_code_here"} Instead of showing "example_html_code_here", the actual HTML code or page is returned. Should this HTML code be es ...

javahtmljson

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Struggling to concentrate on a text field following navigation in an AngularJS application

My current project involves working with an AngularJS application where I am facing a challenge in setting the cursor or focus on a specific text box when routing to a page. Despite my attempts using various methods such as setFocus() in JavaScript, autofo ...

javascripthtmlangularjs

Utilizing Filepond to extract base64 data in a React JS environment

Struggling to extract a base64 from an image upload and send it along with other values to the server. Due to API limitations allowing only 2 files at a time, I'm unable to process uploads individually. Having difficulty in mapping the 'data&apo ...

javascriptreactjsfilepond

I am attempting to draw a correlation between two numerical variables

I'm struggling to compare two scores in my game. When they match, I want it to display "You won", but I can't get it to work. I've attempted using the parseInt method and .val method, but no luck so far. var numberFour = Math.floor(Math.ra ...

javascriptjqueryhtml

Updating a section of a component using another component

I need to update the Header.vue component from the ConfirmCode Component when the confirm method is called When a user logs in with axios ajax, I want to refresh the li element of the header component Appointment.vue: <send-sms-modal@clickClose="setS ...

javascriptvue.jsvuejs2vue-component

Adding an external font with CSS in Bootstrap 5 can be quite challenging

Hey there, I'm a newcomer around here and I could use some help with my post. It might not be perfect, but any guidance you can offer would be appreciated. The issue I'm facing is that I'm having trouble getting the font I downloaded or lin ...

cssbootstrap-5

automatically changing the input type based on the selected option in the dropdown menu

Currently, I am working on a project that involves attendance management. One of the key features I am implementing is a drop-down box where users can select a month. When a month is selected, a dynamic number of buttons will be generated in a separate div ...

javascriptjqueryhtmlcss

Can a low-opacity gradient be merged with a solid background color?

Can anyone help with this code snippet? Here's the link table { height: 200px; width: 200px; background-color: #444557; /* seems to be hidden by the gradient */ /* Here is the CSS for a gradient background */ /* Source: http://colorzilla ...

cssgradient