When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality works in Chrome but not in Mozilla; in Mozilla, the fixed div overlays the other div.

Below is the code snippet:

<div id="leftfixop909">
        <div id="MKAEitFIXED0">
  </div></div>
  <div id="otherdiv">
  </div>
#leftfixop909{max-width:365px; min-height:103%;margin-left:-8px; float:left;width:35%;min-width:360px; overflow:auto;overflow-x:hidden; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);} #MKAEitFIXED0{width:365px;min-height:101%; background:url(webimg/mainbg.png); padding-bottom:20px;z-index:99;overflow:auto; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);} .RighTFIXIEDbot{position:fixed;bottom:0px;} #otherdiv{width:auto; overflow:hidden;min-height:150%;margin-top:46px;padding-left:20px;} $(window).scroll(function () { var height=window.innerHeight; var DIVHEIG=$("#MKAEitFIXED0").height(); var NOWstoPS=(DIVHEIG-height); if ($(this).scrollTop() > NOWstoPS) { $('#MKAEitFIXED0').addClass('RighTFIXIEDbot'); } else if ($(this).scrollTop() < NOWstoPS) { $('#MKAEitFIXED0').removeClass('RighTFIXIEDbot'); } });

If you have any suggestions or solutions, please let me know. I suspect that Mozilla does not accept the min-height property, but fixing the height may result in either a scrollbar or some content being cut off.

javascriptjqueryhtmlcss

Answer №1

If you're looking for a solution, try implementing the following CSS styles for your div elements:

#maincontent{
    position: fixed;
}

#sidebar{
    position: sticky;
}

Give it a try and see how it works!

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

Using axios to call a web API method from within a ReactJS web worker

Currently, I am utilizing Web Worker alongside ReactJS (Context API schema) and encountering a particular issue. The design of my Web API and Context is outlined below: WebWorker.js export default class WebWorker { constructor(worker) { let code = ...

javascriptnode.jsreactjs

Generate a randomly structured 2D array called "Array" using JavaScript

Can anyone help me with extracting a random array from a 2D named array? I've tried several solutions but none of them seem to work. var sites = []; sites['apple'] = [ 'green' , 'red' , 'blue' ]; sites['o ...

javascriptarraysrandom2d

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code: // UPDATE MARKS router.patch('/:studentId' ...

javascriptexpressvue.js

Automatically selecting a row within Material-UI's data grid using React code

Currently, I am in the process of developing a React web application and utilizing DataGrid from Material-UI by Google. The grid displays based on the user's selection from a select list (e.g., if the select list consists of fruits and the user choose ...

javascriptreactjsdatagridmaterial-uirow

Clicking to remove dotted borders

One common CSS solution to eliminate the dotted borders that appear when hyperlinks are clicked is as follows: a:active, a:focus, input { outline: 0; outline-style:none; outline-width:0; } Although this method effectively removes the unwanted ...

htmlcss

Issue with the width on Mobile Safari

Encountering a strange problem with mobile Safari on iPads and iPhones where the body and some divs are getting cut off in the middle. Despite trying various solutions, I can't seem to fix it. The website works perfectly fine on desktop but not on mob ...

htmlcsscss-floatmobile-safari

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

The width of table cells within a div is completely disregarded

The cell width property seems to be ignored in this situation. Despite trying numerous approaches, the cells are splitting into equal portions and not respecting the specified width. Inspecting the code did not reveal any unexpected inheritance that could ...

htmlcsshtml-table

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

Is there a method in Next.js for relocating the .env file to a location external to the application folder?

Currently, I am developing a project that incorporates a Next.js application with the .env file stored in the root directory of the project. Is there a way to configure Next.js to search for the .env file in a location other than the app's root folde ...

javascriptnext.js

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

cssimportsassbootstrap-5

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

Challenge with delayed function execution in AngularJS

In my Angular application, I am encountering a problem in the following scenario. There are three crucial files: MainCtrl.js Upon loading the application, the init() function in MainCtrl.js is triggered, which then calls the flowService as shown below: ...

javascriptangularjsajaxasynchronous

I wonder where the file from the HTML form download has originated

Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...

javascriptpythonhtmlajaxgoogle-chrome

Transform a REACT js Component into an HTML document

I'm working with a static React component that displays information from a database. My goal is to implement a function that enables users to download the React component as an HTML file when they click on a button. In essence, I want to give users ...

javascripthtmlreactjs

Can you manipulate and refine a JSON response using jQuery?

Can the JSON response from a Server be manipulated in jQuery.ajax() before triggering the complete or error functions? Let's delve deeper into this query: Is it possible to inspect each property of the JSON data while processing it, and inform $.aja ...

jqueryajaxerror-handling

What is the best way to organize Node/Express routes based on their type into different files?

My /router/index.js file is becoming too cluttered, and I want to organize my routes by group (user routes, post routes, gear routes) into separate files within /router/routes/. Here's what I currently have set up: app.js var express = require(&apos ...

javascriptnode.jsexpressroutes

Troubleshooting problems with the width of a Bootstrap navbar

I'm encountering a frustrating issue with my bootstrap menu. When I include the "navbar Form" in the menu, the width of the menu extends beyond the screen width in mobile mode (when resizing the browser window or viewing on a mobile device). Interesti ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Extract the HTML content from a file stored on the computer

Currently, I am utilizing Google App Engine alongside Python. My goal is to retrieve the tree structure of an HTML file located within the same project as my Python script. Despite attempting numerous approaches, such as using absolute URLs (for example ht ...

pythonhtmlgoogle-app-enginelxml