Demonstrate the smooth transition of background colors

I am attempting to add a subtle animation to the background-color in my navbar, as it currently appears suddenly. I want the transition to be smooth and gradual.

Check out the JSFiddle demo here: https://jsfiddle.net/3f0czkpt/

The jQuery code below will add a CSS class to the navbar when scrolling:
.affix {
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
        background-color: #000;
        transition: padding background-color 0.2s linear;
      }
You can include the necessary libraries for Bootstrap and jQuery using the links provided. The HTML markup for the navbar and sections with content are also included in this snippet.
jquerycssbootstrap-4css-transitions

Answer №1

Make sure to include the transition rule in the base class, .navbar, rather than the class that is added after the scroll threshold is met. Remember to use a comma to separate multiple transition properties.

body {
  padding-top: 50px;
  background-color: #eee;
}
.navbar { 
  transition: padding, background-color 0.2s linear;  
}
.affix {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  background-color: #000;      
}

Check out this live demo: jsFiddle

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

What are some tips for improving the smoothness and efficiency of my CSS @keyframes animation on SVG elements specifically in Firefox?

I noticed that this particular animation is causing high CPU usage on all browsers, although it runs more smoothly in Chromium. Is there a way to optimize its performance? Here's the SCSS code which is relatively simple: @keyframes laptop { from { ...

csssvgcss-animations

Modify the contents of three div elements by incorporating JavaScript and ajax techniques

Currently working with rails 4 and JavaScript, I am faced with the following dilemma: I want to be able to alter the content of 3 specific divs on my page by clicking a single button. The values in these divs are being created by a Ruby function located in ...

javascriptjqueryruby-on-railsrubyajax

Optimizing HTML5 metatags and styles for a mobile application

As a C++ developer who has recently delved into using HTML5 for my mobile applications, I am in need of guidance when it comes to fine-tuning my meta tags. While I do have some knowledge in web programming, there are still gaps in my understanding. I am s ...

csshtmlstylesmeta

Utilize ajax requests to dynamically enable or disable input fields

Currently, I am developing an attendance management system for employees. The attachment below contains three input fields - one dropdown and two calendar fields. The dropdown includes the names of employees, the second field displays the current date and ...

phpjqueryajax

Display scroll bars over the position:absolute header

My container has content that exceeds its size in both directions. To see the issue, try scrolling horizontally and vertically on the table available here: The vertical scrollbar is visible as desired, except that it gets hidden behind the table header un ...

javascriptcssreactjs

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

I am completely new to CKAN and front-end development. I've been scouring through various html/css files without success in locating where I can adjust the field sizes in the resources form (where users can modify metadata via GUI). I would like to r ...

htmlcssckan

Cover the entire screen with a solid background color and adjust the text size accordingly

I'm encountering two issues. Despite my efforts to adjust multiple containers, the background colour #eee simply won't reach the bottom of the screen. I've even tried setting the HTML height to 100%, but to no avail. Even though I&apos ...

htmlcsstwitter-bootstrap

The has-error class cannot be applied to certain input elements

I am currently in the process of validating some inputs within a modal: <div id="modal-section" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="m ...

javascriptjqueryhtmlcssbootstrap-4

The JSON object is coming back as null

I need some clarification on why I am getting an "undefined" alert. Any assistance you can offer would be greatly appreciated as this problem is holding up progress on a crucial project. JavaScript $.getJSON("item-data.json", function(results) { ...

javascriptjqueryjson

Let's implement a sleek "load more" feature for your ASP.NET repeater just

Hey there, I was wondering if anyone has any cool samples of how to implement a Twitter-style load more items feature. How can I accomplish this using an ASP.NET repeater? ...

c#jqueryasp.netajax

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...

javascriptjquerycsshtml

Is there a way to easily duplicate this and add a navigation bar and logo to every page?

Why is it that when I copy and paste this code into any .html document, it only runs correctly on the resources tab? The logo is only showing up on the resources page, even though it's using the same css stylesheet and html structure. <div class=" ...

htmlcssnavigationstylesstylesheet

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss

Executing functions from within a VueJS component using included bootstrap or jQuery scripts in the template/layout

As a beginner in VueJS, I am looking to create an Admin Dashboard using the SB Admin Pro bootstrap template that we have already purchased. While BootstrapVUE is available, we are committed to utilizing the specific template we own. My Objective: Within o ...

vue.jsbootstrap-4

Is it possible to conceal the controls on the slick carousel?

Is there a way to prevent slick from automatically adding next and previous buttons? I've tried using CSS to hide them but it doesn't seem to work. <button type="button" data-role="none" class="slick-prev" aria-label="previous" style="displ ...

cssjquery-pluginsslick.js

The Jquery Countdown plugin fails to initialize

Currently struggling with getting the jquery Countdown plugin to work for a 12-day countdown. Despite all efforts, the countdown does not seem to start and I am at a loss on how to troubleshoot this issue. After searching online extensively, I have yet to ...

javascriptjquery

AngularJS is not showing the dropdown options as expected

I am facing an issue where the dropdown list options are not displaying, even though I am able to fetch the data in the controller but not in HTML. Here is the code snippet: In HTML <select name="nameSelect" id="nameSelect" ng-model="model.name"> ...

javascriptjqueryangularjs

Using jQuery to target an element within the same hierarchy level

I am trying to achieve the following functionality: <ul id="notifications"> <li onclick="toggleArrived('{{Aircraft}}',this)"><div class="top notoff"><img src="../lib/img/arrived.png" /></div><div class="botto ...

jquery

What is the best way to arrange 5 images in a single row using the bootstrap grid system?

I managed to recreate the following screenshot using Bootstrap 4.1: https://i.sstatic.net/fXaSt.png Check out this fiddle for my attempt, although the alignment of the images is not quite right. The HTML code I used in the fiddle to replicate the screen ...

htmlcssimagebootstrap-4bootstrap-grid