How to make a section header stay at the top of a wrapper container

Currently, I am facing an issue with getting a section header to stay fixed at the top of a wrapper div. The challenge lies in the fact that the wrapper div must have a specified height and overflow set to scroll.

I came across this example (jsfiddle) that perfectly demonstrates the desired behavior, with the exception of lacking a wrapper div with a set height and overflow.

Upon adding the wrapper div with a set height and overflow using this modified example (jsfiddle), it becomes apparent that the solution is not functioning as expected.

Is there anyone who has a workaround or solution to address this issue?

Displayed below is the CSS code for the wrapper that I am currently working with:

.wrapper {
   height: 500px;
   overflow: scroll;
}

Answer №1

As mentioned by Thanasis in the comments, it is necessary to adjust the scrolling context from window to .wrapper.

In order to prevent the fixed div with 100% width from covering the scrollbars, the only solution I know of is to set the width to calc(100% - 17px), with 17px representing the fixed width of the scrollbar.

You can view the fiddle here: https://jsfiddle.net/nwt58L8j/6/

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

"Transferring data between pages using jQuery, PHP, MySQL, and HTML

Is it possible to retrieve the value assigned to <p class="myclass"></p> using a PHP script after setting it with jQuery's $('.myclass').text('txtvalue');? For example, I want to access this value without resorting to j ...

Three.js encountered an issue while compiling the fragment shader: The variable 'texture' was not found

Encountering a compiling issue with a fragment shader while working with Three.js. Below is the code I'm using: https://jsbin.com/cigadibeya/3/edit?html,js,output. I attempted to create an animation similar to this example: THREE.WebGLProgram: shader ...

How to prevent selection of certain days in an Angular date input

I need help with my Angular component that includes an input date field. I am trying to figure out how to disable all past dates and also a specific range of future dates, such as those between 2023-10-15 and 2023-10-23. Is there a way to achieve this func ...

Tips for deleting directory path from a file name

Similar Question: How to extract file name from full path using PHP? echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? "&nbsp;" : htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImag ...

Tips for retrieving a collection of nodes using a specific CSS selector in jQuery

How can I select a set of nodes using a CSS selector in jQuery? In YUI, this is accomplished with YAHOO.util.Selector.query(abc, root), where abc represents the CSS. Can anyone help me convert this functionality to jQuery? ...

Position the background in CSS according to the class name

There are a total of 8 icons, with 4 in blue and 4 in grey. Therefore, product 1 has both a blue icon and a grey icon. When the user has product 1, they will see the blue icon (with an added class on the container called .gotProduct), and when they don&ap ...

Decoding user input parameters within a vue module

It seems like I am hitting a wall when it comes to finding solutions for this particular issue. Currently, I have a component that is supposed to retrieve data from a file and display it. My intention is to only pass the filename to the component so that ...

What is the recommended method for obtaining the maximum suggested number for the y-axis?

How do I determine the suggestedMax value for the yAxes scale? For instance, in the provided image, it is 4000 for legend2 and 400 for legend1) Legend Label 1: https://i.sstatic.net/ZfVSz.png Legend Label 2: https://i.sstatic.net/l05ar.png var canva ...

Issues arise when building with Angular using `ng build`, but everything runs smoothly when using `

My Angular 5 application uses angular-cli 1.6.8 { "name": "test", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "karma": "ng test", "test": "jest", "test:watch": "j ...

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

Organize objects in an array as an array of arrays in JavaScript

I'm attempting to organize a collection of objects into an array of arrays based on the 'group' key in the objects. Current array: array = [ [{name:’a’,age:’4’,group:’15’},{name:’b’,age:’4’,group:’15’}, {na ...

the most efficient and speedy way to execute an AJAX request on a server

$.ajax({ url: "data.php" }).done(function(data) { //code }); What is the most efficient and low server impact method to make an AJAX call only when there is new data in the "data.php" file? For example, using setInterval. ...

The power of MobX lies in its ability to provide a deep

I'm currently delving into the concept of deep observability in MobX. I'm looking for insights on why the autorun function is not being triggered every time I call setCommentCountForPost in the code snippet below. Can someone point me in the rig ...

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...

Transforming the add to cart button into a view button within the product listings: an easy guide

I am currently developing a unique ecommerce website called bookslab.in. To enhance the user experience, I would like to replace the "add to cart" button with a "view details" button when users view the list of available products. Furthermore, when users c ...

Trouble with Loading Responsive Tables on Flask Templates and Datatables

Currently, I am in the process of developing a web application using Flask. The structure involves a base.html file serving as the parent template containing the navbar and other key components. Each page linked from the sidebar utilizes extended templates ...

Is it possible to leverage Create-React-App's npm start in conjunction with Node.js?

I've recently started diving into React and node.js. My goal is to have a node.js server that can serve up React.js pages/views. After running 'create-react-app' and then using 'npm start', I'm not sure if I also need to man ...

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

One issue I'm encountering is with a group of tabbed divs that I'm using jQuery hide() and show() to toggle the visibility. This method functions perfectly in most browsers, but unfortunately in Internet Explorer (IE), the hidden tabs become unre ...

Retrieving HTML using jQuery Ajax POST

While attempting to utilize a jQuery Ajax POST request to fetch an HTML select menu from a PHP script, I encountered a perplexing issue. $.ajax({ type: "POST", url: "books/editions", data: dataString, cache: false, success: function(me ...

Ways to verify if a minimum of three letters in each variable correspond

let nameOne = 'chris|'; let nameTwo = 'christiana'; To use JavaScript, what is the best way to determine if three or more letters match between both variables? ...