Is a fixed div located inside a fluid grid container?

Having developed a website with a fluid 12 column grid, I am looking to lock the position of a div in the right hand column once it reaches the top of the page (using something like StickyJs or a similar tool).

However, when the fixed position is applied, the div is removed from the DOM and it disrupts the grid structure as the div loses its parent formatting.

https://jsfiddle.net/k4r00au0/

position: fixed;

Is there a way to preserve the position and size of the div after fixing its scroll position?

I have attempted:

width: inherit;

but with no success.

Thank you in advance for any assistance, as I am a bit perplexed by this issue!

jqueryhtmlcssfluid-layoutgrid-system

Answer №1

To address this issue, you can use Javascript to set the width manually.

var fixedElement = $('#fixed'),
    container = fixedElement.closest('.inheritw');

$(window).on('resize',function(){
    fixedElement.width( container.width() );
}).trigger('resize')

See a demonstration at https://jsfiddle.net/k4r00au0/1/

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

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

jqueryhtmlcss

Adjust the height of the dropdown list in react-select (React Material UI)

I recently added a dropdown feature using react-select to my project. However, I encountered an issue where the dropdown list was initially too large and taking up the entire page. I am looking for a solution on how to style the react-select dropdown list ...

cssreactjsmaterial-ui

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element. Here is the code I have written so far: function setBodyMinWidth(name){ var max = 0; $(nam ...

javascriptjqueryhtmlcsswidth

Activate jquery to initiate the login modal

I am having trouble getting the login modal to appear using jQuery. I can't seem to figure out why it's not popping up. You can check a similar question here and I followed the answer but still no luck. <script> $(document).ready( ...

htmlbootstrap-4bootstrap-modal

Lack of concentration leads to inaccurate inputs upon clicking the submit button during jQuery validation

I am working with a form that submits via AJAX. <form action="/Home/Contact" method="POST" id="form0" novalidate="novalidate"> <div class="form-group"> <label class="control-label" for="FullName">name& ...

javascriptjqueryasp.netajaxasp.net-mvc

Disabling padding on TwitterTweetEmbed component in React Twitter Embed

Having an issue with Material UI and React Twitter Embed, unable to remove top and bottom margins. Here's the code snippet causing concern: const styles = theme => ({ listItem: { padding: '0px', }, tweetSize: { margin: 0, ...

cssreactjstwittermaterial-ui

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips

I have a long list of data consisting of 30-50 rows, each row needing its own distinct tooltip. Creating unique IDs for each row would require unnecessary JavaScript code. My goal is to utilize jQuery to retrieve the tooltip from the nested <DIV> wit ...

javascriptjqueryhtmljquery-selectors

Ways to transfer variables between JavaScript files using a deferred function

I am encountering an issue while trying to retrieve a json object from another JS file. It appears to be a timing problem as the setTimeout function I added runs twice; first with the object correctly populated, and then again with the object becoming unde ...

javascriptjquery

How to make a Kendo Grid Combobox template or editor automatically set focus and select all text

I've been experimenting with using the combobox as either an editor or template for a column. The key difference is that one (the template) is always visible, while the other (the editor) is only displayed when the user edits a cell in the column. I&a ...

jquerykendo-uikendo-grid

What is the best way to align this alert in the center of the screen

Hey there, I'm facing an issue with aligning an alert horizontally when a user clicks a button. I've been trying different methods but can't seem to get it right. The goal is to keep the alert within #main. You can check out this fiddle for ...

htmlcsstwitter-bootstrap

Styling elements with CSS to display inline blocks next to each other while taking up the full

I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...

htmlcssweb

The jQuery resize() method seems to be malfunctioning

My jQuery resize function is not working properly. I am trying to implement a custom scroll for devices with a width of 767, but it doesn't seem to be functioning as expected. Normally, the scroll works on devices above 767 in width. How can I fix thi ...

jqueryresizewindow

Capturing information within a jQuery function by accessing data from another function

Can data be collected from another function while the function is running? // Custom Function function getData(){ var name = 'tom'; return name } // Main Target Area $('.myDiv').click(function(){ // I need to retrieve dat ...

javascriptjqueryfunction

In React development, a div (button) is visible, but in the production build, it becomes hidden from

I have been working on a website for my job, and I have added a "Gallery" button on top of two slideshows. Everything works perfectly fine on the development build, but when it comes to the production build, the button doesn't show up for some reason. ...

htmlcssreactjsproductioninvisible

Is the ajax response not being sent back?

Hi! I'm currently working with the Django framework and facing an issue with the Ajax response. Below is the code snippet I have tried: def ForgotUsername(request): if request.method == "POST": email = request.POST['email'] ...

jquerypythonajaxdjango

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

javascripthtmlcsscanvas

Managing post and session data during PHP form submission

I've encountered an issue with my code structure. What I aim to achieve is: To validate if post values exist, then execute the query and show the results. If post values are not present, check for a session value. If session is available, manipulate ...

phphtmlformsif-statementisset

Using jQuery to duplicate elements by copying and pasting

I am facing a scenario where I need to dynamically create and manipulate a div element in my web application. The process involves appending the newly created div to another container upon clicking a button, followed by triggering a series of functions on ...

javascriptjqueryfunctioncanvascopy-paste

Tips for arranging a column using a personalized display function in Handsontable

Handsontable version 0.34.2 (current version, unable to upgrade) I have a homepage displaying customer details using Handsontable. The first column is the ID column, which is a clickable HTML link. When clicked, it shows the customer's detailed infor ...

jqueryhandsontablecustom-renderer

The incorporation of SVG within a span disrupts the conventional left-to-right arrangement of its child elements

As I was working with some basic HTML, I encountered an issue. <span> <span>Hello</span> <span>World</span> </span> The above code displays: Hello World However, when I tried adding an SVG element like this: <s ...

csssvg