I have a sidebar that is set to position:fixed; and overflow:auto;, causing the scrolling to occur within the fixed element.
When the sidebar is activated, the element remains static on the page without any movement.
My goal: I am looking to keep the .super-image-thumb fixed inside the scrolling element so that the thumbnails at the top remain fixed when scrolling occurs.
I have attempted a javascript solution but it still does not work as expected. Any suggestions?
It's a common issue that Fixed inside Fixed can be problematic. Instead of using 'top', let's try a different approach: bottom: http://jsfiddle.net/po29jx04/
function adjustPosition() {
$('.floating-div').css({
'bottom': $('.content-wrapper').scrollBottom()+'px'
});
}
$('.content-wrapper').scroll(adjustPosition);
adjustPosition();
Adding Javascript to the mix will only serve to complicate things.
The key here is CSS, specifically utilizing position: fixed or absolute, which is always relative to the first ancestor with position: relative.
I recommend removing the jQuery code and incorporating the following CSS:
.slide-content {
position:relative;
}
.super-image-thumb {
position:fixed;
background: #FFF;
top:0;
width:100%;
z-index: 2;
}
.main-image-container {
position:absolute;
top:85px;
z-index: 0;
}
You can view the implementation in this jsfiddle
It appears that using transitions and position: fixed simultaneously may not be fully supported in all browsers. Removing either of them resolves the issue. For potential solutions, you can refer to this resource on Stack Overflow.
I have created a code snippet without transitions and removed the JavaScript part as it seems unnecessary. Instead, I propose a CSS-only solution. While it is not completely finalized and requires some additional adjustments, the approach for addressing the problem should be clear.
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.super-image-thumb {
position: fixed;
top: 10px;
}
.main-image-container {
margin-top: 100px; // should be same as thumb height
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>I am working with a parent element that contains some child elements. I create a DocumentFragment and clone certain nodes, adding them to the fragment. Then, I attempt to insert the fragment into the DOM using the insertAdjacentHTML method. Here is an ex ...
Error Message: "The package has been deemed invalid due to the following reason: 'Localization was utilized, however default_locale was not specified in the manifest.' Issue: I have developed a customized extension and defined a default locale, ...
I am looking for a way to trigger the click event more than once in my project. I attempted using "live" but it didn't work as expected. There are 2 other similar scripts in this Django project. If you have any suggestions on improving this project, p ...
Recently, I delved into the world of CSS and am still getting the hang of it, Below is a snippet of code that I have been working on, <div id='ninja-slider'> <ul> <li> <div data-image="images/md/1.j ...
When updating the states setProductsShow and setSelectedCategories, it is important to note that setSelectedCategories is updated before setProductsShow. This sequence is crucial for rendering products correctly. I have come across numerous solutions rega ...
This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...
Looking to enhance a PHP calendar script, everything seems to be functioning correctly except for displaying days from the next months which are not appearing on the grid. I've attempted to troubleshoot the issue myself with no luck, so I would greatl ...
Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...
I am facing a challenge that seems simple to resolve, but it's proving to be quite tricky. Currently, I have a functional PHP file that fetches data from a database and stores it in an array. This file does not require any parameters and the output i ...
Having trouble maintaining the state of my collapsible items after a page refresh. I'm using bootstrap 5. To keep the accordion item open, you need to add show to the class. <div role="tabpanel" data-bs-parent="#accordion-1" cla ...
Here is the code snippet I'm working with: driver = new HtmlUnitDriver(); ((HtmlUnitDriver) driver).setJavascriptEnabled(true); baseUrl = "http://www.url.com/"; driver.get(baseUrl + "/"); ... However, whenever I ...
Encountering an issue when trying to expand the MUI color palette—getting this error instead: Error: Cannot read properties of undefined (reading 'dark') Take a look at my theme.ts file below: const theme = createTheme({ palette: { pri ...
Encountering an Error: EXCEPTION: Unable to find a support object '[object Object]' in [files | async in Images@1:9] Here's the relevant part of the code snippet: <img *ngFor="#file of files | async" [src]="file.path"> Shown is the ...
I'm working on developing a library that will export both server components and client components. The goal is to have it compatible with the Next.js app router, but I've run into a problem. It seems like when I build the library, the client comp ...
Currently experiencing an issue where a form tag is mysteriously closing on its own. In the process of troubleshooting and pinpointing the root cause of this unexpected behavior. Inside the table structure due to Netsuite usage, which complicates the debu ...
Currently, I am utilizing the ui-select module within AngularJS. <ui-select ng-model="tipData.category" search-enabled="false" name="category" required="required" class="orange-site-color-select custom-select"> <ui-select-match><span clas ...
Here is my custom baseQuery with the "Accept-Language" header set in the prepareHeaders function. import { fetchBaseQuery, retry } from '@reduxjs/toolkit/dist/query/react' import i18n from 'i18next'; export const baseQuery = ...
I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...
I have been working on a login form that undergoes server-side validation, and now I am attempting to implement jQuery validation as well. Here is a snippet of the form: <div class="form-actions"> <button type="submit" class="btn green pull ...
Ensuring the correct size of a <canvas> element is crucial to prevent stretching, which can be achieved by setting the width and height attributes. Without any CSS applied other than background-color, I am faced with an unusual issue. Using ctx.draw ...