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

behind the scenes of a disappearing bootstrap modal

Greetings everyone! Currently, I am deep into the process of identifying and resolving a pesky bug that has been impacting my work. The project in question involves developing a module for an open-source platform built on Laravel and Bootstrap - Microweb ...

csstwitter-bootstrap-3modal-dialogbootstrap-modal

Tips for adjusting the time format within Ionic 3 using TypeScript

I currently have a time displayed as 15:12:00 (HH:MM:SS) format. I am looking to convert this into the (3.12 PM) format. <p class="headings" display-format="HH:mm" > <b>Time :</b> {{this.starttime}} </p> In my TypeScript code t ...

htmltypescriptdatetimeionic-frameworkionic3

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

Is it true that Vue 3 + Inertia automatically removes event listeners upon component unmounting?

There is an event listener set up within the script setup block: <script setup> import {ref} from 'vue' const elementRef = ref(null) window.addEventListener('click', (event) => { if (!elementRef.value.contains(event.t ...

javascriptvue.jsvuejs3inertiajs

The "require" keyword cannot be used in a Node-RED Function node

When working with a Node-RED Function Node, the first line I include is: var moment = require('moment-timezone'); I'm attempting to create a timezone accurate date/time stamp for sensor data. However, when this node runs, I encounter the fo ...

javascriptnode.jsibm-cloudnode-red

Cypress test never finishes when an unforeseen alert is triggered in the system during the test

When a web application unexpectedly throws an error using an alert box, the Cypress test becomes stuck indefinitely. The test will not complete or fail until the user manually closes the browser or clicks on the OK button within the alert box. https://i.s ...

javascriptcypress

Using a variable as a URL parameter in a jQuery ajax request: tips and tricks

$.ajax({ type:"POST", url:"hostname/projfolder/webservice.php?callback=statusReturn&content="+str_table, contentType: "application/json; charset=utf-8", crossDomain:true, dataType:'jsonp', succe ...

javascriptajaxhtml

Using AngularJS to dynamically bind data based on certain conditions

I am managing an array of tasks that each have titles and labels. function Task(taskTitle, taskType) { this.title = taskTitle; this.type = taskType; } $scope.tasks = []; As I create different tasks with various types and add them to the array. In ...

javascriptangularjsdata-binding

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

What are some techniques to enhance images post cropping with PHP?

Currently, I am utilizing the plugin for image cropping. The functionality works as intended where I can crop an image and then insert it into both my folder and database. However, there is an issue concerning the varying file sizes of the cropped images ...

phpjqueryimageoptimizationimage-resizing

Leading astray — using htmlentities will not function

UPDATE (Instead of deleting this question, I'll keep it as a reminder that errors are sometimes found in unexpected places...) I apologize for leading you down the wrong path with this question. The issue causing the "Actual result" was actually loc ...

phphtml

Complete Guide to Node.JS CRUD Delete Functionality

Currently, I am developing a node.js CRUD application that interacts with MongoDB. The main features of this app are allowing users to upload photos, edit details related to the photos, and delete them from the database. However, I am facing challenges i ...

javascriptnode.jsmongodb

Executing JavaScript code from an external link

Currently, I am in the process of developing a horizontal parallax website. The functionality is working seamlessly; when I click on the menu, the slides smoothly transition horizontally and display the corresponding content. However, I have encountered a ...

javascriptjqueryhtmlparallaxhorizontal-scrolling

Guide to easily uploading an image to Amazon AWS (S3) with Ajax and Jquery in a Rails application

Is there a way for users to easily upload their images directly from the site? I've made progress, but now I'm stuck on uploading the image to the server. How can I resolve this issue? HTML - <div> <div style="height: 80px; position ...

jqueryruby-on-railsajaxamazon-s3coffeescript

Arrange a cluster of CSS table cells onto a fresh line

Currently, I am exploring CSS properties to create the visual appearance of a table using two levels of DOM elements. The highest-level element wraps around its child elements, which are styled to resemble a flat list. For example: <div class="t"> ...

htmlcsscss-tables

How can a JQuery ajax success function access the parent object it resides in?

The following is a snippet of my JavaScript code: function Dog() { this.bark = function() { // bark }; $.ajax( perform AJAX call, upon success execute: this.bark(); ); } var TopDog = new Dog(); Unfortunately, the above script doesn't work a ...

jqueryajax

AngularJS - ng-change does not trigger for checkbox that toggles the class "switch"

CSS Styling: <span style="color: blue;">Hello, World!</span> JavaScript Function: function showMessage(){ alert('Hello!'); } I tried to implement a span element with blue text color. However, the function that was supposed to ...

javascriptangularjs

Is using setTimeout in a group of promises blocking in JavaScript?

Is it possible for multiple requests to be queued up and executed in sequence when calling the function func? The third promise within func includes a lengthy setTimeout that can run for as long as 3 days. Will additional calls to func trigger one after an ...

javascriptnode.jspromisesettimeout

Experience a login page similar to Google's with a fully functional back button

I'm currently working on a login page that requires the user to enter their username and have it validated before proceeding. Once the username is confirmed as valid, a new input field for password entry should appear. However, I'm facing an issu ...

javascripthtmlajaxnode.jsback-button

What is the best way to automatically place the cursor in a text box when a webpage is loaded using JavaScript?

Just starting out in web development and looking to enhance my skills. I am trying to find a way to automatically place the cursor in a specific text box on a website when the page loads. Currently, I am experimenting with the Greasemonkey add-on for this ...

javascript