What is the best way to create a fading footer effect on scroll using jQuery?

Why is my footer not fading in after 1000px like I want it to? Instead, it appears immediately on the screen. I attempted using fadeIn() in jQuery but had no luck. I also tried to make it disappear with fadeOut(), again with no success. Am I missing something here?

Thank you!

//function to show the footer after a certain pixel value
  jQuery(function($){
    $(document).scroll(function () {
        var y = $(this).scrollTop();

        if (y > 1000) {
            $('footer').show().fadeIn("slow");
        } else {
            $('footer').hide().fadeOut();
        }
    });
});

<!--Footer-->
<div id="ft" class="page-wrap">
  <main>
    <section>
    </section>
  </main>
  <footer>
    <small>
      - Footer -
      <p>Content Lorem ipsum dolor</p>
      <p>lorem ipsum</p>
      </small>
  </footer>
</div>
javascripthtmljquerycssfooter

Answer №1

It seems like this could be the solution you've been seeking:

Check out the Demo

Utilizing JQuery

$(window).scroll(function(event) {
function showFooter()
{
    var scrollPosition = $(window).scrollTop(); 
    if(scrollPosition > 20)
    { 
        $("footer").fadeIn("slow").addClass("show");
    }
    else
    {
        $("footer").fadeOut("slow").removeClass("show");
    }

}
showFooter();
});

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

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

javascriptjqueryhtmlcss

What is the best way to swap out an icon based on the chosen option?

Here is my code: $('#mySelect').on('change', function() { var value = $(this).val(); $(".title").html(value); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href=" ...

javascriptjqueryhtmlcss

Why do confirm or alert boxes in Safari on Windows require a double click?

I'm currently working on a simple JavaScript example where I want to display an alert box when an HTML button is clicked in SAFARI. However, I've noticed that it requires a double click to make the alert disappear from the screen. Does anyone ha ...

javascripthtml

Tips for hiding a popover in Angular when clicking outside of it

In a demo I created, rows are dynamically added when the user presses an "Add" button and fills in a name in an input field. Upon clicking "OK," a row is generated with a Star icon that should display a popover when clicked. While I have successfully imple ...

javascriptjqueryangularjs

Issue with JQuery loading causing disruption to HTML text formatting

I set up a heading on my website by using the following HTML code: <div id="question"> <h1>Question Goes Here</h1> </div> The font style is controlled by my CSS and it's set to size h1. The text displayed there is tempora ...

jqueryhtmljquery-selectors

Vue is set up to monitor changes in two connected input fields for user input exclusively

Two input fields are available, where the value of one can affect the other. If a value between 1 and 200 is entered in the level field, Vue will look up the corresponding points for that level and populate the points field with them. Conversely, if a us ...

javascriptvue.js

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

I'm having trouble manipulating arrays of different types, specifically when working with interfaces. It's a simple issue, but I could use some help. Here are the two interfaces I'm using: export interface Group { gId: number; gName: st ...

javascriptarraysangulartypescript

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

Data on global map routes displayed in highcharts react

After reviewing the react highmaps documentation, it appears that they have saved the map data in a hardcoded manner. Take a look at Link 1 Check out Link 2 In various tutorials, I noticed that the data is retrieved from high maps itself by passing a ke ...

javascriptnode.jsreactjshighchartsnpm

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

htmlcssrow

Angular authentication function not invoked

I am currently using Angular along with a JWT token for user authentication. However, I have encountered an issue where the login() function assigned to $scope is not being called. Any assistance on this matter would be greatly appreciated. app.js snippe ...

javascriptangularjsauthentication

What is the best way to update Bootstrap's placeholder text using jQuery.on?

In my form, I have an input field with a Bootstrap placeholder and a select dropdown. The requirement is that when an option is selected from the dropdown, the text within the input field's placeholder should dynamically change. This is what I tried: ...

jquerytwitter-bootstrap

Modify the color of the footer area and eliminate any underlines present

In the footer section, the tags are displaying in blue color and I would like to remove the line under the li tags. If necessary, I can provide additional HTML or CSS code for reference. Below is the snippet of HTML and CSS related to the footer: My HTML ...

htmlcss

What could be causing the undefined value in the radio button for yes/no selection?

Currently, I am implementing Ajax functionality using jQuery and PHP. After the user submits a portion of the multipart form, the results should be displayed in a new div on the page. The form consists of several yes/no radio buttons. However, instead of ...

phpjqueryajax

Ways to transfer a value to another component in React

Currently, I am working on a project where users can add, edit, or delete movies from a list. While the addition and deletion functionalities are working fine, I am facing challenges with the editing feature. In my Movie component, I have included a text i ...

javascriptnode.jsreactjswebecmascript-6

Is there a way to adjust this function in order to retrieve a value and display it in a div located beneath the

Seeking a way to extract and create a variable from the href attribute in the div below the clicked element. This variable will have multiple uses in the script. Sample HTML: <div class="ellipsis"> <a title="Newest" href="#picked" class=" ...

jquery

Modify URL parameters in Vue.js based on specific conditions to remove key-value pairs

Currently, I am working on a filter feature where I need to append query parameters to the URL based on user selections. If a user chooses a specific option, I want to modify the query string accordingly. Here's an example of my current URL structure: ...

javascriptvue.jsvuejs3vue-router

Elm div contenteditable loses cursor position after content update

Is there a way to maintain the cursor position while typing in a contenteditable div? I'm utilizing Elm to generate a text box and require the text within it to undergo processing with every input. The rationale behind opting for a contenteditable di ...

htmlcontenteditableelm

Understanding the implementation of options within dataTables that have been initialized with an aaData JavaScript array

When initializing my datatable, I used an aaData object and specific options like so: $('#dataTable').dataTable(dataTableObj, { "bPaginate": false, "bLengthChange": false, "bFilter": true, "bSort": false, "bInfo": false, ...

javascriptjqueryarraysdatatables