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

Issue with jQuery Master-Detail dropdown list selection

Having trouble isolating the code in this jsfiddle script. Despite my efforts, it seems that isolation is not working as expected and Firebug isn't showing any errors on the console: <!DOCTYPE html> <html lang="en"> <head> ...

javascriptjqueryhtml

Tips for running two elixir tasks consecutively?

Check out this piece of code: var gulp = require('gulp'), fs = require('fs'); gulp.task('taskOne', function() { return gulp.src('folder1/file1.js') .pipe(gulp.dest('folder2')); }); gulp.t ...

javascriptnode.jsgulplaravel-elixir

The header appears distorted on older versions of Internet Explorer, specifically IE 7 and IE

The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...

htmlcssinternet-explorerlayoutheader

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

phphtmlbootstrap-5

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

How can I iterate through multiple rows in JavaScript?

Feeling stuck, the simple yet dreaded for loop has become my nemesis and I could really use some guidance. Currently, I have a Google sheet with 3 rows (excluding headers) and 8 columns. As users input data via a web app, the number of rows will dynamicall ...

javascriptgoogle-apps-scriptgoogle-sheets

Is it possible to pass makeStyles as a prop in React components?

Within my component, I am using a prop named styling to apply inline styles. However, I would like to pass some predefined styles that I have written using the makeStyles function. The specific style I want to pass is detailed below: const useStyles = ma ...

javascriptreactjsmaterial-uiinline-styles

Mongoose - facing issues with $and operator, looking for a way to locate an array containing both items

I'm currently developing a chat-based application that involves private messaging between individuals. Essentially, a Chat model in my application consists of the following schema: let schema = new Schema({ members: [{ type: ObjectId, ref: models.u ...

javascriptnode.jsmongodbexpress

What makes AJAX take so much time to load?

Hey everyone, I’ve been working on compiling and sending some forms to a PHP file but I've been noticing that the process is quite slow. Even when I use var_dump in PHP to only display the POST values, it still takes a considerable amount of time co ...

javascriptphpjqueryajaxpost

Need help with creating a new instance in AngularJS? Unfortunately, the save method in CRUD is not getting the job done

Whenever I attempt to create a new task, nothing seems to happen and no request is being sent. What could be causing this issue? How can I go about troubleshooting it? Take a look at how it appears here Check out the $scope.add function below: var app ...

javascriptruby-on-railsangularjscrud

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

javascripthtmlcanvasgrayscale

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Incorporate image into Vue.js form along with other information

I have been successfully sending the content of multiple fields in a form to the Database. Now I am looking to add an additional field for uploading images/files and including it with the other form fields, but I am unsure about how to accomplish this task ...

javascriptphpvue.js

Exploring methods for monitoring page transitions in Next.js

Looking to repurpose a menu I created in react using react-router-dom for use in nextjs. My objective is to update the menu state to 'false' and change the menuName to 'menu' upon clicking on a link within the menu. Implemented a useEf ...

javascriptreactjsreact-hooksnext.jsnext-router

The art of encapsulating JSON response objects in Ember Objects with a deep layer of wrapping

Currently, I am engaged in a project using Ember where I retrieve a complex JSON response in a Route's model function. In the associated template, I exhibit attributes of the response. Some of these attributes allow for specific actions that result in ...

javascriptjsonember.js

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

Give a class to the element contained within an anchor tag

One way to add a class to the <a>-tag is through this line of code. $("a[href*='" + location.pathname + "']").addClass("active"); However, I am looking to add the class to an li element inside the <a>-tag. What would be the best ap ...

javascripthtml

Is there a way to select an element within a nested list item only when the preceding list item is clicked using Jquery/JavaScript?

I am working with an unordered list that looks like this: <ul> <li><a class="foo" id="one">some text</a></li> <li><a class="foo" id="two">some text</a></li> <li><a class="foo" id="thr ...

javascriptjquery

What method can be employed to eliminate choice selection lacking any value?

Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...

javascriptjqueryhtmlransack

Effortlessly deleting a row with JQuery and PHP without reloading the page

I am currently working on creating a jQuery function to delete a div, but I'm facing an issue. Whenever I click the submit button, the div is not being removed and the page gets refreshed. How can I achieve this without refreshing the page? You can ...

javascriptphpjqueryajax