The permanent header is covering up the vertical scroll bar

Currently, I am attempting to integrate a jquery plugin from this source - https://gist.github.com/3819758, into a table in order to create a fixed header. However, the table in my case is too wide, causing the generated header to obscure the vertical scrollbar - http://jsfiddle.net/NWV73/4/

I have been unable to find a solution to this issue on my own. Any assistance or advice would be greatly appreciated.

Answer №1

If you want to achieve synchronized scrolling of divs using JavaScript, here is a sample code:

$(".content-box").scroll(function(){
    var $this = $(this),
        $sidebar = $(".sidebar");

    $sidebar.css("margin-top", 0 - $this.scrollTop() )
});

For a working example, check out this updated jsfiddle: http://jsfiddle.net/UVW43/12/

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

Creating code that is easily testable for a unique test scenario

My function, readFile(path, callback), is asynchronous. The first time it reads a file, it retrieves the content from the file system and saves it in memory. For subsequent reads of the same file, the function simply returns the cached content from memor ...

Ways to insert a line break within a jQuery function using text()

I am looking to add a new line in my jQuery function. $.ajax({ url:"http: //192.168.1.4/Experiements/webservices/api.php", type:"GET", dataType:"json", data:{type:"login", UserName:userId,Password:userPassword}, ...

Is there a way to activate ng-move following a splice operation?

I am currently using ng-animate in my project, where I have a list of entries displayed through ng-repeat. The issue I'm facing is that when I make a selection on one entry, it disappears from the list. I have properly defined the classes .ng-move, .n ...

Difficulty in accessing controller data in AngularJS with ng-repeat

I am trying to display comments using ng-repeat in a section, but I am having trouble accessing the data. Even after debugging, I cannot access the data without modifying the controller. I am new to Angular and prone to making mistakes. HTML / JS &apo ...

Incorporating a fixed header title when creating a customizable table

I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

Electron / Atom Shell unable to locate specified module

I am completely new to npm, node, and Electron. Here is the structure of my folder: -package.json -index.html -main.js -js/myStuff.js -node_modules In the file myStuff.js, I have a line that says var chokidar = require('chokidar'); but it keep ...

How can I access an array option that combines both global and target-specific specifications within a grunt plugin?

Currently, I am in the process of creating a grunt plugin that includes options which can consist of arrays of values. These values are specifically file paths (distinct from the files listed in the task's own 'files' property). The setup fo ...

Enabling cross-origin requests using Express JS and the power of HTML5's fetch()

How do I enable cross domain requests using ExpressJS server and Javascript's fetch? It seems like there might be an issue with the client-side fetch() function because the response headers include Access-Control-Allow-Origin: *. I attempted to resol ...

Unique background image that perfectly aligns with the dimensions of a single full screen

Does anyone know how this webpage achieves the effect of having a full-screen background that ends when scrolling down? I have noticed that the picture of the desert always covers my entire browser screen but is not a typical full-screen background as it ...

What is the syntax for creating a zip function in TypeScript?

If I am looking to create a zip function: function zip(arrays){ // assume more than 1 array is given and all arrays // share the same length const len = arrays[0].length; const toReturn = new Array(len); for (let i = 0; i < len; i+ ...

Calculating the size of an array based on its attributes

Hey there, I'm working with an array containing attributes and need to determine its length. In this particular case, the array should have a length of 2 since there are only two "items" present. {"items":[{"value":"2","valor":0,"name":"Limpeza"}, {" ...

`Incorporate numerous models into a For Loop for efficient processing`

Currently, my goal is to: Retrieve a JSON file from the server that contains data regarding my models Utilize a PLY loader within a for loop to incorporate them into the scene Include them in an array Below are the functions I've implemented: func ...

Why isn't the connect.use() function working in Node.js?

I have been studying and applying examples from a book to learn Node.js. While replicating one of the examples, which involved creating a middleware, I encountered an error when trying to run the JavaScript file. The error message stated "undefined is not ...

Unusual behavior observed in Javascript Regexp while attempting to match non-whitespace characters, exemplified in a functioning

I find myself puzzled by certain aspects of RegExp. Can anyone offer some insight? Could there be hidden words within RegExp that cause a failure to match? My suspicion is that the sequence "slt" contains a clandestine symbol that sabotages the success of ...

Guide to displaying options in the Vue material select box even when the default value is blank

I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...

Instructions for creating a Bootstrap modal form that captures email inputs from a table when the associated row button is activated

I am facing an issue where clicking any button from the table always inputs the first email in the database. I want it to retrieve the email associated with the specific record corresponding to the clicked button. Here is the structure of the table: &l ...

Adjusting the dimensions of :before with JavaScript: A Step-by-Step Guide

There's this CSS3 tag named body:before that I'm working with, and I'm looking to adjust the height and width of body:before using JavaScript. Any suggestions on how to achieve this? ...

The generation of the page fails due to the absence of defined data

Every time I try to start my server, the error message pops up saying 'data is not defined', even though I have already defined the data content. export default class App extends Component { data = [ { key: "john", val ...

What is the method for retrieving the input text value contained within a select option?

I have encountered an issue in my HTML template where I am unable to retrieve the value within the input field upon submitting, especially if a custom category name was entered. The code includes an HTML <select> and <input> fields: {% for i ...