Animating transitions on a dynamic Bootstrap navbar using jQuery

I have the code attached here, and I successfully changed the color of the navbar and logo when scrolling down. However, I am looking to add a transition effect when this change occurs.

I experimented with various transition options in CSS, but unfortunately, none of them worked.

 <nav class="navbar  fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="/assets/Intech Logo.png" height="54px" alt="" loading="lazy" />
        </a>
      </div>
    </nav>

JQuery

$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1) { 
            $('.navbar .navbar-brand img').attr('src','/assets/PNG White Print.png');
            $('.navbar').addClass('scrolled')


        }
        if ($(this).scrollTop() < 1) { 
            $('.navbar .navbar-brand img').attr('src','/assets/Intech Logo.png');
            $('.navbar').removeClass('scrolled')
        }
    })
});
.navbar{
  background-image: linear-gradient(to right, #1c003b , #5216aa);
  transition: all 0.5s ease;
}

.scrolled{

  background-image: linear-gradient(to right, #15002d , #3e1181);
  transition-timing-function: ease-out;
  transition: 0.25s;
  transition: all 0.5s ease;// not working

}

If you have any suggestions or guidance, I would greatly appreciate it. Thank you.

Answer №1

// Example using jQuery

$(window).scroll(function(){
   var scrollPosition = $(window).scrollTop();
   if(scrollPosition < 400){
       $('.fixed-top').css('background', 'rgba(71,71,71,1)');
   } else{
      $('.fixed-top').css('background', '#fcfcfc');
   }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
 <nav class="navbar fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" height="54px" alt="" loading="lazy" />
        </a>
      </div>
    </nav>

    <!-- INSERT YOUR HTML CODES HERE -->
   <h1 style="margin-top: 90px;"> Add your HTML codes here and they will function.</h1>
    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
 </script>

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

Encountering the error of receiving "$ undefined," despite making a reference to the library

I have included the JQuery library in the following way: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> Despite trying to download the library and include it locally in my project, I ...

Exploring methods to retrieve data from the web3 platform through Node.js

Is there a way to retrieve token information such as name, symbol, and decimals using Nodejs in conjunction with web3js? ...

How do I automatically redirect a user after they login using react redux?

Currently, I am utilizing react redux in conjunction with Next.js. The goal is to redirect the user to a specific page if they meet certain requirements. I have implemented this logic within my useEffect function and it works as expected. However, upon r ...

jQuery failing to recognize multiple selection form elements

<select class="js-example-basic-multiple categories form-control" name="categories[]" style="width: 100%" multiple="multiple"> <option value=""></option> <option value="fresher">fresher</option> <option value=" ...

Contains a D3 (version 3.4) edge bundle chart along with a convenient update button for loading fresh datasets

I am looking to update my D3 (v3.4) edge bundling chart with a new dataset when a user clicks an 'update' button. Specifically, I want the chart to display data from the data2.json file instead of data1.json. Although I have started creating an u ...

Troubleshooting: Issue with CSS chaining adjacent sibling and :checked functionality

When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...

Retrieve distinct keys from a JSON file in Node.js

Below is an example of JSON data: [ { "Name": "User1", "primaryRegion": "US" }, { "Name": "user2", "primaryRegion": "US" }, { "Name": &q ...

Dynamic data-* attributes in Meteor are being set and retrieved when clicked

Using Meteor, I am developing a website for Campus Recruitment. Within my mongo collection, I have a list of companies scheduled to visit various colleges. The HTML structure is as follows: [{#each jobs}} <li class="list-group-item college-list"> ...

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...

Unable to choose radio button again

Check out this fun web quiz I created! I'm having some trouble with the back button functionality. Whenever a user clicks back, I want to restore their previous choice but for some reason it's not working as expected. Take a look at my go_back ...

What is the proper way to retrieve an object from a json file?

My JSON structure looks like this: { "total": 4367, "page": 1, "per_page": 10, "paging": { "next": "/videos?query=second%20world%20war&per_page=10&access_token=XXX&page=2", "previous": null, "first": "/v ...

What is the best choice for UI design framework when creating an ERP web application?

I am in the process of creating a web-based ERP application using Angular Material. However, I've noticed that each input element takes up a significant amount of vertical space on the page. This means if I have 15 input elements, I have to scroll dow ...

Having trouble accessing dynamically generated elements using Selenium

I've been attempting to change the router's SSIDs using a Selenium script, but I'm encountering difficulty accessing any JS elements generated by the router page. I've tried various Expected Conditions and methods without success. Here ...

Modify the css of the initial div following a live click

After clicking on the span.submit-comment, I am looking to modify the CSS of a specific div. Can anyone advise me on how to achieve this? I attempted to change the background color of the div in the success section of the script like so: $('div.new ...

I could use some assistance with iterating through an array that is passed as a parameter to a function

Compute the product of parameter b and each element in the array. This code snippet currently only returns 25. This is because element a[0], which is "5", is being multiplied by argument b, which is also "5". The desired output should be ...

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

The issue of AngularJS failing to bind object properties to the template or HTML element

Just dipping my toes into angularJS, following Todd Motto's tutorials, and I'm having trouble displaying object properties on the page. function AddCurrentJobs($scope){ $scope.jobinfo = [{ title: 'Building Shed', description: ...

How to Deactivate Horizontal Scrolling Using CSS in WordPress

Hey there, I'm currently working on a WordPress blog and facing an issue. Here's the link to my problem: When I resize the browser (X-Axis) to a minimum, like when using a mobile device, I noticed that I can scroll to the right in the Content se ...

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

What is the best method to retrieve text from a <span> element within an <li> element nested inside a <ul> using BeautifulSoup?

I need help extracting the content from the Here’s what’s new section on this page. Specifically, I am trying to capture everything between In the coming weeks and general enhancements. After inspecting the code, I noticed that the <span> elemen ...