Utilizing animation transitions when adding or removing classes

Currently, I am troubleshooting an issue with the transition effect between adding and removing two classes fixed-top and fixed-bottom. Even though I have included CSS properties for smooth transitions, such as:

  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;

I have also implemented JavaScript code for the scroll behavior:

var lastScrollTop = 0;
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    if (st > 500) {
      $('.box').removeClass("fixed-bottom").addClass("fixed-top");
    }
  } else {
    if (st < 500) {
      $('.box').removeClass("fixed-top").addClass("fixed-bottom");
    }
  }
  lastScrollTop = st;
});
html,
body {
  height: 100%;
}

.container {
  height: 2000px;
}

.box {
  width: 100%;
  height: 50px;
  background: #777;
}

.fixed-top {
  position: fixed;
  top: 0;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box fixed-bottom"></div>
</div>
javascriptjquerycsscss-transitions

Answer №1

When a stripe jumps up and down, it may be because the values of bottom within .fixed-top and top within .fixed-bottom are not set properly. This can confuse the transition processor on which attribute to transition. To resolve this issue, you should use jquery to get window.height() for a proper transition. This will also make your CSS code shorter. Take a look at the snippet below

var lastScrollTop = 0;
var y = $( window ).height() - $('.box').height() + "px";
$('.box').css("top", y);
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    if (st > 500) {
      $('.box').css("bottom", y);
      $('.box').css("top","0");
    }
  } else {
    if (st < 500) {
      $('.box').css("top", y);
      $('.box').css("bottom","0");
    }
  }
  lastScrollTop = st;
});
html,
body {
  height: 100%;
}

.container {
  height: 2000px;
}

.box {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background: #777;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box fixed-bottom"></div>
</div>

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

Best Practices for Sequencing Vuex Actions and Safely Updating the State in between Calls

I have a Vuex store set up in my application with defined getters, actions, and mutations. One of the actions, called initConfiguration, is responsible for fetching data from an API and then committing this data to a mutation that updates the state. This a ...

javascriptvue.jsvuejs2vuex

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

I am encountering an issue with my code where I am trying to incorporate images into custom tooltips. The goal is to dynamically generate PNG filenames based on the tooltip name or ID, but I am struggling to find unique values to assign as filenames for ea ...

javascriptjquerychart.js

CSS hover effect causes text to unexpectedly slide out before it is meant to

I've set up a collection of glyphicons that reveal expanding text when hovered over. The problem I'm encountering is that if the text happens to be lengthy, it flashes over the container of the glyphicon before the CSS transition finishes. You ...

htmlcss

Ensure that the focus() function is called only after the completion of the jQuery append

I'm using both append() and focus() functions to set focus on the first input element in the appended DOM. However, Internet Explorer is slow in appending the elements which causes the focus not to work as intended. Is there an alternative method to s ...

javascriptjquery

Is there a way to manually add route resolve data to a controller without using automatic injection?

Two routes in my application share a controller, but one route requires data to be resolved before the view loads while the other does not. Here is an example of the routing segments: ... when('/users', { controller: 'UsersCtrl', ...

javascriptangularjs

Is it possible to do a comparison with jQuery that is not case sensitive?

Within the code snippet labeled as the "dev function" below, my intention is to convert a string to lowercase in order to conduct a case-insensitive comparison between the content of the "html" variable and the text within the span tags. I seem to be enco ...

jquerycase-insensitive

Automatically fill select dropdowns upon page load with data retrieved from arrays using a combination of jQuery, Ajax, and PHP

My goal is to populate three select boxes simultaneously when the page loads. Each box will contain data from a different array: $cpuArr, $motherboardsArr, and $videocardArr. PHP $cpuArr = file_get_contents('data/cpu.json'); $motherboardsArr = f ...

phpjqueryajax

Tips on efficiently reusing a variable

As someone who is relatively new to Jquery and Javascript, I have been attempting to search for a solution to my question on this platform. However, it seems that the terminology I am using may not be accurate enough to yield relevant results. If there is ...

javascriptjquery

Choose the url path using UI-Router option

In my Angular project, I am implementing a complex structure of nested states using UI-Router. I am working on setting up a parent state that will determine the language of the application based on an optional locale path in the URL. For Spanish www.web ...

javascriptangularjslocalizationangular-ui-routersingle-page-application

Ways to add a value to an Array within the State

Currently in the process of developing a form for creating blog posts that requires an input field with the name tags, which is meant to be an array in the state. To populate the array, I am utilizing the .push method to add my inputs to an initially empt ...

javascriptreactjs

I am encountering issues with my JavaScript code not functioning properly

I am currently working on a website project in HTML where I need to retrieve JSON-formatted data using JavaScript and then display it on the site. However, I am facing an issue as I cannot seem to identify any errors in my code. I followed this sample code ...

jqueryhtmljson

The functionality of the webservice is not functioning properly

I'm currently working with Express and NodeJS to create a simple hello world webservice. I am attempting to call this webservice in ReactJS using Axios, but I am encountering issues with the response from the webservice. Below is my code for the webse ...

javascriptnode.jsreactjsexpressaxios

Is there a way to trigger an event on a particular class within the DOM when my element has several different classes attached to it?

When developing a booking platform, I encountered an issue with deleting text and buttons. Since my delete button has two classes, using className could not properly identify the specific class needed for deletion. Additionally, the event was not being app ...

javascripthtmlcssdom

JavaScript method of retrieving an object inside an array nested within another object via multer

Below is my custom multer function to handle file uploads - const storage = multer.diskStorage({ destination: (req, file, callback) => { let type = req.params.type; let path = `./data/${type}`; fs.mkdirsSync(path); callback(null, path) ...

javascripttypescriptmulter

Error: Unable to assign value to property 12 because the object does not support extensibility

I'm facing an issue with my client application as I cannot figure out the error I am encountering. Despite successfully subscribing to a GraphQL subscription and receiving updates, I am struggling to update the TypeScript array named "models:ModelClas ...

javascripttypescriptapollo-clientgraphql-subscriptions

Incorporate HTML and JavaScript to dynamically show a button when a specified condition evaluates as true and hide the button if the

I need help with a scenario where I want to show a button only when a specific variable reaches a certain value. For instance, if the variable equals 5, the button should be displayed; otherwise, it should be hidden. Here are the two buttons included withi ...

javascripthtmlcssbutton

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Is there a way to set the width of the comment box that appears after clicking the Facebook "Like" button? I know how to adjust the width of the button itself and related content, but can't find any options for the comment box: I've tried overri ...

javascripthtmlcssfacebookfacebook-like

Struggles with toggling a sliding menu using JQuery

As I work on constructing a menu, I've implemented submenus that slide down upon hovering over the parent item and remain expanded when clicking on an arrow next to the parent. While the hovering functionality is working correctly, I'm encounteri ...

javascriptjquerydrop-down-menuslidetoggle

Guide on encrypting data on the server with PHP and decrypting it on the client side using JavaScript

I'm currently developing a training website with PHP and I am looking to share my training resources securely without worrying about copyright issues. My plan is to encrypt the documents on the server before sending them, and then have them decrypted ...

phpjavascriptjqueryencryption

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