Header that sticks to the top of the page while the image slowly fades

Can anyone help me with my jsfiddle? I have a sticky header that shrinks when scrolling down, along with a png overlay that also shrinks. However, the current animation looks bad. I tried using fadeIn with jQuery but it's not working as expected.

How can I shrink the header while fading out the image more smoothly? Thanks

$(window).scroll(function() {
    if ($(this).scrollTop() > 50){  
        $('#header').addClass("sticky");
        $('#logo').addClass("sticky");

    }
    else{
        $('#header').removeClass("sticky");
        $('#logo').removeClass("sticky");

    }
});

Check out my jsfiddle here

Answer №1

That is the accurate response.

$(window).scroll(function() {
    if ($(this).scrollTop() > 50){  
        $('#logo, #header').fadeIn(1500);
        $('#header, #logo').addClass("sticky");

    }
    else{
        $('#logo, #header').fadeOut(1500);
        $('#header, #logo').removeClass("sticky");

    }
});

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

Issue with backdrop-filter blur effect not functioning correctly

I'm currently utilizing SCSS and within my _header.scss file, I am importing it into my main.scss like so: @use "header"; Here is the snippet of code from my header file (I've removed some less important details such as borders, margin ...

Identify a specific HTML template using jQuery

I am currently working on implementing datepickers in various HTML templates. The issue I am facing is that the functionality only seems to work in my index.html file. When I try to replicate the same setup in another template, it does not function proper ...

Creating inline form groups within a form

Hey there! I'm looking to align the divs with class="form-group" so that their labels are on top, rather than inline with the fields. Currently, they are stacking on top of each other like this: https://i.sstatic.net/rNoS3.jpg I want them to appear ...

Eliminate the whitespace separating two div elements

How do I eliminate the empty space between the header and wrapper div elements? Check out this DEMO fiddle. Below is the HTML code: <div id="container"> <div id="header"> <div id="logo"> </div> <div ...

Retrieving Precise Information from jQuery/AJAX and PHP Script

After encountering some challenges with my previous post on Stack Overflow being considered "too broad," I have decided to break down my questions into more specific inquiries. In this post, I am seeking guidance on retrieving precise data from a MySQL dat ...

Is there a way to transfer a table from one page to a pop-up page using jQuery?

Is it possible to transfer a table from one page to another through a pop-up when a button is clicked? For example, on page A, the following code is present: <table> <tr> <td>Name</td> <td>Age</td> </tr& ...

Search for documents using jQuery on the page

Here is the layout of a page: HTML <div class="alert alert-dismissable"> <div class="form-group text-center"> <div id="Section"> <div class="row"> <div class="col-md-12"> ...

Experiencing the power of DoJo with the latest Wordpress 4

SOLUTION: After some investigation, I discovered that reordering the loading sequence of jQuery UI and DoJo files in the footer resolved the issue. By placing jQuery UI before any DoJo-related files, I ensured jQuery UI was fully loaded before any DoJo scr ...

Displaying a carousel using CSS

I have constructed a carousel using HTML, but for some reason it does not display anything once compiled. <div class="list-offers"> <div class="container"> <div class="row1"> <div class="col-xs-12 item bg_fix right" style="ba ...

Click Event for Basic CSS Dropdown Menu

My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

Creating nested columns in a bootstrap grid system can enhance the structure and organization of your

I am currently attempting to use Bootstrap grid to create nested columns, but unfortunately, the layout I am getting is not nested as intended. {% for home in home %} <div class="container"> <div class="row" ...

Unraveling the mysteries of the Bootstrap carousel script

Hi everyone, I'm a newcomer to the world of JS and jQuery. Recently, while examining the code in carousel.js, I stumbled upon this particular line: this.cycle(true) The cycle function is structured like this: Carousel.prototype.cycle = function ...

JavaScript click or text-to-speech

Currently, I am working on a web application that is designed to automatically read text. Below is the code snippet that I am using: function hablalo() { var palabra = new SpeechSynthesisUtterance('Casilla 6 turno E18'); palab ...

The malfunction of jQuery.ajax during the onbeforeunload event

I'm facing an issue with a PHP page that looks like this: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> window.onbeforeunload = saveBeforeExit; function saveBeforeExit() { jQ ...

How can we effectively override the automatic contrasting color determination of buttons based on their background in Boostrap v5.2 SCSS compilation?

Buttons in Bootstrap v5.2 dynamically adjust the text color based on the button color. Currently, I am modifying the bootstrap variables override file to change the primary color for my custom theme $green: #369d6d !default; $primary: $green !default; Ho ...

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...

Updating the content of a div when the mouse hovers over it

Looking for some help here - I have a few divs with paragraphs of text inside. My goal is to change the text in each div when it's being hovered over. I know this can be done using JavaScript (jquery perhaps?), but my coding skills are pretty basic. A ...

Exploring the reasons for utilizing class and ID selectors within a <div> element to enclose a map in OpenLayers

The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...