I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in.

Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the comment around the background-image property in the CSS.

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    $('#header').addClass('headtop');
  } else {
    $('#header').removeClass('headtop');
  }
});
#header {
    transition: all 1s ease;
}

.headtop { 
    z-index: 997; 
    position: fixed; 
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    background-color: #aaaaaa;
    /*background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);*/
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header" class="container">
<h1>this is header</h1>
</div>
<div class="container">
<br>this is content<br>this is content<br> [...]

javascripthtmlcssbackground-image

Answer №1

To achieve this effect, you can create a div with a background image and utilize the transition property to go from opacity 0 to 1.

Here is a sample implementation using your code:

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    $('#header').addClass('headtop');
  } else {
    $('#header').removeClass('headtop');
  }
});
#header {
    transition: all 1s ease;
}

.headtop { 
    z-index: 997; 
    position: fixed; 
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    background-color: #aaaaaa;
    
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity:1 !important;
}

#header .background {
  z-index: -1;
  position:absolute;
  width:100%;
  height: 69px;
  transition: all 1s ease;
  border-radius: 0px 0px 25px 25px;
  background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);
  top: 0;
  opacity:0;
}

.headtop .background {
  opacity:1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header">
  <div class="background"></div>
  <h1>this is header</h1>
</div>
<div class="container">
<br>this is  content<br>this is  content<br>this is  content... (continued)

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

How can I optimize my .find query for a MongoDB GET request to achieve maximum performance?

I'm struggling to figure out how to retrieve only the last item stored in my database using a GET request. While I can successfully get the desired output in the mongo shell (as shown below), I haven't been able to replicate it in my GET route qu ...

javascriptnode.jsmongodbexpressejs

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

javascripthtmljqueryajaxweb

Here is a unique version: "In Javascript, users can trigger the function this.Something() from within this.img.onload by

I have some code that looks like this... Thing function () { var img = new Image; DoSomeStuff function() { //Code here that relies on my image being loaded... }; InitMe function(src) { this.img.onLoad = this.DoSomeStuff; ...

javascript

Setting up Express routes in a separate file from the main one: a step-by-step

My goal is to organize my routes separately from the main app.js file using the following file structure. I attempted to create a api/user/ post API but encountered a 404 error. Any suggestions on how to resolve this issue with the given file structure? . ...

javascriptnode.jsexpressmiddleware

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

React component failing to update upon rerender

I've encountered an issue with my Flux setup where the component doesn't rerender when adding a new Todo, although it does when deleting or changing the checkbox. I find this behavior confusing and wonder what might be causing it. The list itself ...

javascriptreactjsnpmreact-hooksflux

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

Access the Vue instance from a different element instance

I've developed a leaflet map using vue.js. There's a method I've created called 'showSubmit' that needs to be triggered on the leaflet marker moveend event. Here's what I'm currently doing: this.map.markers.user.on("move ...

javascriptvue.jsleaflet

Array of Ascending Progress Indicators

I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...

javascriptjqueryhtmlcss

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

javascriptcssthymeleaf

Customize Your Lists in Wordpress to Reflect Your Unique Style

I need help with styling a specific text widget in Wordpress by adding a FontAwesome icon as a list bullet. I have the following CSS code: .covenant li { counter-increment: my-awesome-counter; margin: 0.25rem; } .covenant li:before { font-family: 'Fo ...

htmlcss

The webpage's Document Object Model fails to refresh following a JavaScript modification

I have encountered an issue with a sample webpage where I am attempting to set the wmode of all YouTube elements on the page to "transparent." When inspecting the page using Chrome, I can see that my JavaScript code is functioning properly. However, the b ...

javascriptyoutubewmode

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

javascriptjquerycssjquery-animate

Extracting Data from JSON Structures

I am struggling with extracting data from a JSON string that looks like this: var txt= '{“group”: [ {“family1”: { “firstname”:”child1”, “secondname”:”chlid2” }}, {“family2”: { ...

javascriptjson

Is it possible to execute a function once another function has been called within a specific interval

Currently, I am working on a Greasemonkey script and have encountered an issue. The website contains a function that runs at regular intervals: jQuery(function1.run); setInterval(function1.run, function1.interval); I aim to execute my function immediatel ...

javascriptjquerygreasemonkey

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles

Issues with Bootstrap Carousel Fade Transition and Button Controls inoperable

I am currently exploring the creation of a carousel on bootstrap that transitions smoothly between three images (specifically 3 'gorilla' jpgs). However, I am encountering some challenges while learning HTML. Challenge 1: The carousel is not tra ...

htmlcss

When comparing the values of two arrays with undefined property values

Struggling with sorting an array of arrays that works perfectly except when the property value is undefined. Take this example: posts array = {id: "1", content: "test", "likes":[{"user_id":"2","user_name":"test"}] }, {id: "2", content: "test", "likes": ...

javascriptarraysangularsorting

The react-native-video-controls package was used in React Native. When the onBack event was triggered, it successfully navigated back to the initial screen. However, upon returning

https://i.stack.imgur.com/GsS3d.png https://i.stack.imgur.com/HYBOU.png Attached are screenshots showing the issue I am experiencing with my video player. When I click the back button, the screen does not return to its initial state and the flatlist items ...

javascriptreactjsreact-nativereact-native-flatlistreact-native-video