The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows:

  1. As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent element.

  2. Once the bottom of the div reaches the bottom of the parent element, its class should revert back to a non-fixed position.

However, there is a problem:

In Firefox, when the div reaches the top of the parent element, it disappears. This issue does not occur in Chrome, IE, or Safari where the div remains visible.

How can I prevent the div from disappearing in Firefox?

You can view all the code needed to address this issue by clicking on this link: .

javascriptjqueryhtmlcssfirefox

Answer №1

There seems to be a problem with the height setting in Firefox and possibly some versions of IE, specifically related to nested tables with a height set to 100%.

In Chrome, $('#col12').height() measures at 1102 while it shows as 0 in Firefox.

A suggested workaround is to adjust the following line of code:

else if ($(this).scrollTop() + $el.height() 
  < $el.parent().offset().top + $el.parent().height())

to:

else if ($(window).scrollTop() + $el.height() 
  < $el.parent().offset().top + ($('.content2').height() - $('#fullsize td:first').height()))

If more descriptive ids are assigned to elements, the td:first selector can be replaced.

The issue stems from the layout where the main content includes a left column with one row and a right column with two rows. The bottom row of the right column should have maximum height but does not. To determine the correct height, subtract the height of the top row of the right column from the height of the left column.

If this explanation is unclear, please let me know so I can revise my response accordingly.

mkm

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

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

Resolving Node.js Absolute Module Paths with TypeScript

Currently, I am facing an issue where the modules need to be resolved based on the baseUrl so that the output code is compatible with node.js. Here is my file path: src/server/index.ts import express = require('express'); import {port, database ...

javascriptnode.jstypescriptnode-modules

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

imagecssvue.jsbootstrap-4

Unable to retrieve an image from various sources

My setup includes an Express server with a designated folder for images. app.use(express.static("files")); When attempting to access an image from the "files" folder at localhost:3000/test, everything functions properly. However, when trying to ...

javascriptnode.jsexpress

Sorry, we couldn't locate the API route you are looking for

Within my Next.js project resides the file main/app/api/worker-callback/route.ts: import { NextApiResponse } from "next"; import { NextResponse } from "next/server"; type ResponseData = { error?: string }; export async function PO ...

javascriptnext.js

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Svelte Material UI Circular Progress Indicator encountering issues

I'm having trouble getting the Svelte Material UI Circular Progress indicator to function properly. I attempted to implement it in my project initially, and then decided to try it out in Code Sandbox using the provided code from the documentation. How ...

javascriptmaterial-uisvelteuicomponents

Ensure that the form is validated even when setState is not executed immediately

I am currently working on a form in React and I am facing an issue with validation. When the Submit Form button is clicked without filling in the input fields, an error should be displayed. This part is functioning correctly. However, even when the fields ...

javascriptreactjsforms

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

I've been developing a web application that allows users to store collections. There is a dashboard page where all the user's collections are displayed in a table format, with each row representing a collection and columns showing the collection ...

javascriptreactjstypescriptnext.js

The art of designing Mongoose and Router files

Let me share my directory structure with you: bin/ www models/ myMongooseModel.js public/ ... routes/ index.js anotherroute.js views/ ... app.js package.json In my app.js file, I have configured some settings using app.set and app.use comman ...

javascriptnode.jsmongoose

How can I safeguard my app from crashing when the initial state is set by undefined props?

What is the best way to prevent the state from crashing if props native_languages[0] does not exist? This is my attempt at protecting the app, but it still crashes when native_languages[0] does not exist: this.state = { language: props.currentDocu ...

javascriptreactjs

The Shopify CLI's node serving function has not been operational for a project that is one year old

As I embark on refactoring my previous Shopify project, I encounter an issue when executing the command "shopify node serve" which prompts the following error message. "This command can only be run within node projects." Despite this error message, my pr ...

javascriptnode.jsnext.jsshopifyshopify-app

Can you explain the purpose of :not(style) ~ :not(style) in CSS?

Upon investigating, I found that Mui automatically included a :not(style) ~ :not(style) selector which required the use of !important in my sx to override. .css-1rb8ayf-MuiStack-root > :not(style) ~ :not(style) { margin-top: 40px; } .css-d13d9m-MuiSta ...

cssmaterial-ui

CSS3 :not does not exclude a selector by id

Hello wonderful community of Stackoverflow, Here is my CSS code: .text:not(#overview > *) { margin-top: 10px; margin-bottom: 10px; } I am trying to apply a 10px top and bottom margin to everything with the class "text", except for elements ma ...

htmlcss

Error: Unrecognized error encountered while using Angularjs/Ionic: Property 'then' cannot be read as it is undefined

codes: js: angular.module('starter.services', ['ngResource']) .factory('GetMainMenu',['$http','$q','$cacheFactory',function($http,$q,$cacheFactory) { var methodStr = 'JSONP' ...

javascriptangularjsionic-framework

Passing information from the created hook to the mounted hook in VueJS

How can I transfer data from the created function to the mounted function in VueJS? In my VueJS application, the code in my created function is as follows: created: function(){ $.getJSON({ url: 'static/timeline.json', success:function( ...

javascripthtmljsonvue.jsvuejs2

The communication between socket.io encountered a net::ERR_SSL_PROTOCOL_ERROR

Here is the client code I am using: const socket = io(url); And this is the server code running on a Linux server with Express: const server = require("http").createServer(app); However, when I attempt to establish a connection, an error occurs. https:/ ...

javascriptnode.jsexpresssslsocket.io

Ruby on Rails and JSON: Increment a counter with a button press

How can I update a count on my view without refreshing the page when a button is clicked? application.js $(document).on('ajax:success', '.follow-btn-show', function(e){ let data = e.detail[0]; let $el = $(this); let method = this ...

javascriptruby-on-railsjson

What is the best way to send data using AJAX in Laravel 5?

Hi there! I need some guidance on sending an ajax request within my page. I'm a bit lost with the process. Here's what I have so far: <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({ hea ...

phpjqueryajaxlaravel

How can one authenticate an express session when sending a POST request?

Is there a way to verify that a user is sending a post request in order to prevent unauthorized posting to a URL? I am currently using express-session for this purpose, but I'm open to exploring alternative methods as well. I attempted to implement t ...

javascriptnode.jsexpresspostexpress-session