Is there a way to automatically add a div to the window as the user scrolls and then hide the div when they scroll back to the

Seeking assistance with creating a function that will add a 'sticky' class to the menu when the user scrolls down to the middle, and then append a div when the 'sticky' class is present. Currently facing issues where the div keeps appending as I scroll and it remains even when scrolling back to the top. Any help or suggestions would be greatly appreciated.

 jQuery(window).scroll(function(){
   
   if(jQuery('.main-menu-top').hasClass('sticky')){
   jQuery('.main-menu-top').append('<div id="checkout_sticky"></div>');
      }else{
            /*I want to hide the checkout_sticky, try hide(), doesn't work*/
   });
javascriptjqueryhtmlcss

Answer №1

If you want to create something that changes once completed, follow these steps:

Start by creating a variable with the value of true. Then, in your if statement, check if the variable is true. If it is, run a function and within that function, change the value of the variable to false.

var test = true;

jQuery(window).scroll(function(){

           if(jQuery('.main-menu-top').hasClass('sticky') && test==true){
test = false;
               jQuery('.main-menu-top').append('<div id="checkout_sticky"></div>');
                   }else{
            /*I want to hide the checkout_sticky, try hide(), doesn't work*/
   });

To make it hidden, you can attempt the following approach:

else { 
    $('#checkout_sticky').css("visibility","hidden");  
}

If that method does not work, you can also try this:

$('#checkout_sticky').removeAttr('id');

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

Error: Unable to modify the div content - Uncaught TypeError: Unable to assign value to innerHTML of null

Attempting to update the contents of a div using JavaScript and innerHTML, but encountering an issue. After implementing the code to change the div's content, the functionality stopped working. The syntax has been double-checked. Tools being used in ...

javascriptjqueryhtmldom

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Access a file from a specified route within Express

Recently, I created a custom Node module that requires a configuration file in CSV format. My goal is to implement this module within an Express Route module; however, I am encountering difficulties related to the loading of the configuration file. Should ...

javascriptnode.jsexpress

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

Executing asynchronous functions in Angular using ng-click

Within my web application, I am utilizing an ng-table that displays a large number of rows per page (up to 1000). One of the features is a select-all checkbox that triggers an ng-change function to mark each table row as selected. However, the execution ...

javascriptangularjs

Using JQuery Datatables to output HTML based on JavaScript conditional logic

I am presently working on a project that involves using JQuery Datatables to display my data. Within this project, I am utilizing the datatables render method to format the data before it is displayed. However, I have encountered a challenge where I need t ...

javascriptjqueryhtmlcodeigniterdatatable

Upload an image converted to `toDataURL` to the server

I've been attempting to integrate the signature_pad library, found at signature_pad, but I am struggling to grasp its functionality. Can someone guide me on how to retrieve an image value and send it to my server? Edit: I have experimented with dec ...

javascriptajaxposttodataurl

What is the reason for TypeScript allowing this promise chain without any compilation errors?

Although I am still relatively new to Typescript, I find myself grappling with a particular issue that has been perplexing me. I am unsure why the following code snippet triggers a compilation error: // An example without Promises (does not compile) funct ...

javascripttypescriptpromise

Oops! Looks like something went wrong. The command to install the debug app failed because the emulator could not be launched. This could be due to the fact that no emulators were found

I'm in need of assistance to resolve these issues Encountered an error while trying to install the app. Please ensure that your Android development environment is properly configured: https://reactnative.dev/docs/environment-setup. Error: Command fai ...

javascriptandroidreactjsreact-native

The methods $.get() and $.ajax() in jQuery are failing to retrieve data from PHP

I've been trying to use a script to display a message from a PHP file after a click event, but I've run into issues with both jQuery $.get() and $.ajax(). With $.ajax(), I get an alert with an empty message, while $.get() alerts "null". load.php ...

javascriptphpjqueryajaxget

Filtering a string array in Angular based on an object's value

I am facing a challenge with two arrays in my code. The first array, $scope.termini, contains strings, and the other one, $scope.reserved, contains objects. Each object in the second array has a variable called vrijemeTermina. My goal is to filter $scope.t ...

javascriptangularjsjsonangularjs-filter

What drawbacks should be considered when utilizing meteor.js for development?

After viewing the meteor.js screencast, I was truly impressed by its seamless web application development capabilities, especially in terms of live updates and database synchronization. However, I am curious about its scalability once the website goes live ...

javascriptnode.jsmeteor

Loading images asynchronously in Next.js before the user arrives at the component displaying them

Currently, I am developing a Next.js application with only one page where users have the option to click on certain buttons to reveal an image. I would like to make it mandatory for clients to download the image before revealing it through a click event. S ...

javascriptreactjsnext.jspreloadnext-images

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

javascriptphphtmlmysqlajax

Updating style of an element by hovering over another

What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...

htmlcsscss-selectors

Detecting the insertion of a DOM element with jQuery: locate a particular element

I am interested in learning how to detect when a SPECIFIC element is added to the DOM and then take action based on that. Initially, after the DOM has finished loading, there is a div(.myElement) that gets loaded much later: <div class="container"> ...

jquerymutation-events

Storing Objects in MongoDB using Node.js

I am working on an application where I need to store an object for later execution of functions. This object essentially holds the data of a cron job. var cronJobObject = schedule.scheduleJob(new Date(2018, 0, 19, 15, 15, 0), function() { console.log( ...

javascriptnode.jsmongodb

Displaying messages in an Angular 2 chatbox from the bottom to the top

As a newcomer to using typescript, I am currently working on an angular 2 project and facing some challenges with creating a chatbox. My goal is to have new messages displayed at the bottom while pushing the old ones up one line at a time, as shown in this ...

htmlcssnode.jsangulartypescript

Tips for clearing a material-ui search input field with the help of a button

Currently, I am working on a tutorial that involves implementing react material-ui tables along with a search input textfield. I am attempting to enhance this by adding a button that not only resets the table report but also clears the search input textfie ...

javascriptreactjsmaterial-uiuse-state

Creating unique URLs for websites can be accomplished by following these steps:

I am in the process of developing a website where content in the main div within the body section can be replaced. However, I have realized that all content will end up on the same URL. Any suggestions on how to fix this? HTML/PHP(index.php): <htm ...

javascriptphphtmlurlweb