Tips for addressing flickering issues when scrolling on your device

I am facing an issue with two elements that are set to a fixed position on the page. When these elements reach the bottom of the page, I want them to revert back to a static position using JavaScript.

The problem occurs when trying to scroll by clicking and dragging the scrollbar. If you scroll all the way to the bottom and then attempt to drag the scrollbar upwards, it flickers and prevents me from scrolling smoothly.

You can view the code in action on JSFiddle

HTML

<header>This is the header</header>
<main>
    <div id="content"></div>
    <section id="fixed-elements">
        <div id="fix1">Fixed Footer2</div>
        <div id="fix2">Fixed Footer1</div>
    </section>
</main>
<footer>This is the footer</footer>

Javascript

$(document).ready(function () {

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('#fixed-elements').css({
            'position': 'static',
                'bottom': 'auto',
        });
    } else {

       $('#fixed-elements').css({
            'position': 'fixed',
                'bottom': '0',
        });            
    }
});

});

CSS

footer, header {
    background-color:green;
}
#content {
    height:1000px;
}
#fixed-elements {
    position:fixed;
    bottom:0;
    overflow:hidden;

}

What could be causing this issue? And is there a solution to fix it? (Similar problems may arise when attempting to scroll using the middle mouse click).

Answer №1

It is possible to achieve this without using static positioning, by adjusting the bottom value accordingly:

'bottom': $('footer').outerHeight(true) + (($('body').outerHeight(true) - $('body').outerHeight())/2),

http://example.com/jsfiddle

Answer №2

Take a look at this jsfiddle example. It effectively addresses the issue without any flickering.

The concept behind it involves setting the position of the #fixed-elements to absolute once you reach the top of the footer. This is in relation to the bottom of the main element, which has a defined position: relative.

Here's the jQuery code snippet:

$(document).ready(function () {
    var totalHeight = $(document).height() - $(window).height(),
        footerHeight = $('footer').outerHeight();

    $(window).scroll(function () {
        console.log($(window).scrollTop(), (totalHeight - footerHeight));
        if ($(window).scrollTop() > (totalHeight - footerHeight)) {
            $('#fixed-elements').css({
                'position': 'absolute',
                 'bottom': 0
            });
        } else {

           $('#fixed-elements').css({
                'position': 'fixed',
                'bottom': 0
            });            
        }
    });

});

Only one line was added in the CSS section:

/* It may enhance smoothness by removing padding and margin from the body */
body {
    margin: 0;
    padding: 0;
}

main {
    position: relative; // Added property for main
}

footer, header {
    background-color:green;
}

#content {
    height:1000px;
}

#fixed-elements {
    position:fixed;
    bottom:0;
}

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

A guide to extracting and storing JSON data in JavaScript variables

I have integrated the CheckPoint API into my web application and I need to store the "sid" in a variable for further use. How can I achieve this? Below is the code snippet I am using to log in: var myHeaders = new Headers(); myHeaders.append("Content-Type ...

Initiating SignalR multiple instances

SignalR is causing me trouble because I am calling .start() multiple times. Below is my jQuery code that currently works: var signalR = $.connection.chat; var signIn = function() { $.connection.hub.start().done(function () { signalR.server.sign ...

Discover ways to retrieve an ajax response from a different domain by submitting specific data to the controller method while operating on an internet server

I am facing an issue where I am unable to retrieve array data from a Codeigniter controller using an Ajax request. The data is being posted to the controller to fetch related data from the database, and it works perfectly fine on my local server. However, ...

JavaScript - Monitoring changes to a node before they occur

Using MutationObserver, I am able to detect node insertion in a tree, however, it runs after the node is inserted. If I need to trigger an event before the node is actually inserted, what steps should I take? For example: // create a new observer instan ...

Is there a hover function in jQuery that works with both mouseenter and mouseout events?

I've been facing a slight issue with a list of items using the <li> element. I have a plugin running that dynamically adds a data-tag ID to the data-* attribute of these items. As a result, all items are dynamically added and another function I ...

Creating a form with multiple checkboxes using Material-UI components where only a single checkbox can be selected

Creating a simple form using Material-UI with checkboxes to select one option and push data to the backend on submit is the goal. The Form component structure includes: multiple options represented by checkboxes only one checkbox can be selected at a time ...

I attempted to increase the value in an array by using the push() method, but I am uncertain about the proper way to do

I have this code that I'm using to organize the staff members in company1, but it seems to be creating a new list of arrays. Can someone assist me with this issue? Once I add the name and ID of the staff, the array will appear as follows: [{compan ...

What is the best way to condense a repetitive method declaration and make it more concise?

I'm facing a situation where I have declared similar const values. Here's my current setup... import React from 'react' function Component_a() { const x = 5; const y = 10; const image_a = [...Array(x)].map((e, i) => ...

Rendering HTML strings instead of HTML in ReactJS

When I try to display HTML, all I see is strings var ref = firebase.database().ref('raffle/'); ref.on('value', (snapshot) => { var content = ``; var IDwrapper = document.getElementById('raffleFeed'); snapshot.forEac ...

Using Angular to make GET requests with JSON data in PHP

Seeking assistance with connecting Angular frontend to PHP backend. Upon calling the service, I am receiving an empty array in the console. Controller: angular.module('pageModule') .controller('pageController', ['$scope', &a ...

The model.find operation is failing to retrieve the necessary fields from the database

When I execute console.log(correct.password), it returns undefined, even though the if condition results in false. app.post('/login' , async (req , res)=> { const correct = data.findOne({name : req.body.name}).select({name : 0}); if(!c ...

I'm having trouble with my Laravel edit page not functioning properly when using vue.js. Can anyone help me troubleshoot

Currently, I am developing a dashboard to display details. Users can click on the edit button to modify their information. However, when I try to edit by clicking the button, nothing happens. It seems like the editing feature is not functioning properly, a ...

Using jQuery to retrieve the content of a span element by its class name

Is there a way to retrieve the value of a span using just the class name? There is only one matching span in the document. My attempt with $('span.foo').text(); did not work. Any suggestions on how to accomplish this? ...

Troubleshooting the CORS problem with 'Access-Control-Allow-Origin' while combining Vue.js for the front-end and Express for the back-end

While attempting to make a call to my API on Jazz using Vue.js and Axios, I encountered the following error: Access to XMLHttpRequest at ' _here' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight ...

"Enhancing Website Styling with Twitter Bootstrap's Border

Recently delving into the realm of Twitter Bootstrap, I find myself pondering on the best approach to incorporate a border around a parent element. Consider this scenario: <div class="main-area span12"> <div class="row"> <div cl ...

Tips for handling transparent areas during a hover event

Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture. <img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first"> #first:hover { -moz-box-shadow ...

Directing to index.html using ExpressJS

JS, I am working on an express app that has various routes defined. However, I am facing an issue where if the router does not match any route, it displays index.html instead of redirecting to a specific route like '/*' as I expected. I am unsu ...

Issue with AngularJS expression not functioning as expected in Chrome for setting input type to "file"

I have encountered a strange bug while working on an Angular form builder application. The issue arises in Chrome when I try to dynamically set the input type based on a variable. Surprisingly, this method works perfectly for all input types except "file", ...

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

Dividing an array in PHP using Ajax

Hey there, I have successfully sent data from PHP to Ajax using Json but now I need help in splitting the response. Can anyone guide me on how to alert each element separately? $.ajax({ url:"myHandler.php", type:"POST", ...