Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll with a 1-second delay.

Essentially, I aim to display four images consecutively when scrolled to 1400 and make them disappear when scrolling back to the top :)

(window).scroll(function() {
  var scrollPosition = $(window).scrollTop();
  
  var phoneScreen = $('.phone-screen');

  var chat1 = phoneScreen.find('#chat1');
  var chat2 = phoneScreen.find('#chat2');
  var chat3 = phoneScreen.find('#chat3');
  var chat4 = phoneScreen.find('#chat4');
  

  if(scrollPosition >= 1400){
    chat1.delay(1000).fadeIn(200, function(){
      chat2.delay(200).fadeIn(200, function(){
        chat3.delay(200).fadeIn(200, function(){
          chat4.delay(200).fadeIn(200);
        });
      });
    });

  }else{
    chat1.removeAttr('style');
    chat2.css('display', '');
    chat3.css('display', '');
    chat4.css('display', '');
  }
});

This is my CSS:

#chat1{
  position: relative;
  top: -1356px;
  z-index: 16;
  display: none;
}

This is my HTML:

<div class="col-md-4">
  <div class="phone-container">
    <img src="images/Tuto/phone-frame.png" alt="Phone frame">
    <div class="phone-screen">

    <img src="images/Tuto/phone-background.png" alt="Phone background" id="phone-bg">
    <img src="images/Tuto/phone-footer-explore.png" alt="phone footer explore" id="phone-fot-exp">
      <div class="profile-screen">
        <img src="images/Tuto/Joanna.png" alt="Girl Profile" id="Girl-one-prof">
        <img src="images/Tuto/szymon.png" alt="Girl Profile" id="boy-one-prof">
      </div>
    <img src="images/Tuto/match.png" alt="match" class="match">
    <img src="images/Tuto/chat.png" alt="chat" id="chat">
    <img src="images/Tuto/chat1.png" alt="chat1" id="chat1">
    <img src="images/Tuto/chat2.png" alt="chat2" id="chat2">
    <img src="images/Tuto/chat3.png" alt="chat3" id="chat3">
    <img src="images/Tuto/chat4.png" alt="chat4" id="chat4">
  </div>
</div>

Answer №1

Would you consider utilizing fixed-positioned elements for this task?

Furthermore, each time you scroll up, an animation is triggered on every img. These animations take a while to start and complete, causing .hide() to struggle in attempting to hide an object affected by an ongoing animation. This is where .stop(true) comes in to the rescue and, as stated at this source, it "Stops the currently-running animation on the matched elements."

You have the option to refactor this code so that it only triggers the animations ONCE when it surpasses the 1400px mark, and AGAIN only when it surpasses it upwards.

$('.phone-screen').children('img').each(function(i){
  $(this).css('top', i * $(this).prev().height());
});
$(window).scroll(function() {

var scroll1 = $(window).scrollTop();

var phoneScreen = $('.phone-screen');

var chat1 = phoneScreen.find('#chat1');
var chat2 = phoneScreen.find('#chat2');
var chat3 = phoneScreen.find('#chat3');
var chat4 = phoneScreen.find('#chat4');

//==================== THIS PART =======================//
if(scroll1 >= 1400){
    chat1.delay(1000).fadeIn(200, function(){
        chat2.delay(200).fadeIn(200, function(){
            chat3.delay(200).fadeIn(200, function(){
                chat4.delay(200).fadeIn(200);
            });
        });
    });

}else{
  $('[id^="chat"]').stop(true).hide();
}
});
[id^="chat"]{
    position: fixed;
    top: 0;
    z-index: 16;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phone-screen">
  <img id="chat1" alt="chat1">
  <img id="chat2" alt="chat2">
  <img id="chat3" alt="chat3">
  <img id="chat4" alt="chat4">
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

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

The dropdown menu items spill out beyond the confines of the container

I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue. Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamb ...

How to eliminate the added URL segment from the URL parameter when using $.ajax with jQuery

I am having a problem with using cakephp and implementing the jQuery.ajax method to send data to my server. The issue I am facing is that jQuery's $.ajax automatically adds the protocol, hostname, and current controller to the URL, making it impossibl ...

Struggling to delete elements from observable array within Knockoutjs framework

I am attempting to use knockoutjs to remove a user from an observable array called users. It seems like my viewModel may not be working correctly because it is within a document.ready function. Here is some context about the code below: My application fet ...

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

The load method in MVC jQuery is not being properly triggered within the $(document).ready function

Currently working on an MVC5 Application.. In my project, I am trying to render two partial views by calling a controller method from $(document).ready of the main view. However, one of the methods never gets called. Below is a snippet of my view: < ...

Can you show me how to line up a series of table rows and use jQuery to slide them up or down?

Imagine a scenario where there is a table with 50 rows, each containing parent/child relationships. The goal is to click on a parent row and expand/collapse all its children rows simultaneously by sliding them up together. How can this be achieved? Consid ...

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

I'm working on a complex Mega Menu project that is activated upon hovering, using the powerful combination of Tailwind CSS and Alpinejs. The functionality is mostly there, but I've encountered some bugs along the way. Despite my attempts to impl ...

The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

Discovering a Match within a JavaScript Object and Array with the help of Jquery's Each

I am currently working on implementing an array of filters to search through a JavaScript object containing store locations. My goal is to find a full match using both filters from the filters array, which currently has 2 items but will eventually have mor ...

jQuery UI Drag and Drop problem with mouse positioning

I am currently working on a website that allows users to drag different "modules" (squares with information) from one location to another on the page using jQuery UI. However, I am facing an issue where when a module is dragged to a droppable zone, the sc ...

Troubles encountered when converting JSON data into JSONP

I'm having trouble getting data in jsonp format for use with phonegap. The code seems to be not working on the web browser and there are no errors showing up in the console. It's clear that something must be wrong with the code, but since I have ...

Exploring the iteration of objects utilizing underscore.js

Currently, I am diving into the world of backbone.js and encountering a slight issue while iterating over some models in a view. The first code snippet seems to be functioning correctly, but the second one, which is underscore.js-based, does not work as ex ...

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

Please include text beneath the input group addon class

Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/aj ...

The server has denied access to the resource due to a HTTP 403 Forbidden error in the AJAX request

I have exhausted all resources online in an attempt to resolve an error I am encountering with my AJAX request. Even after trying XMLHttpRequest() request, the problem remains unsolved. Below is the code for my Ajax Request: $.ajax({ type: "POST", url: " ...

Utilize open-source tools for website design

Can anyone suggest an open source toolset for WYSIWYG HTML/CSS design? What tools have you found most helpful in your projects? ...

Analyzing length of strings by dividing content within div tags using their unique ids

Here's my issue: I'm using AJAX to fetch a price, but the source from where it is fetched doesn't add a zero at the end of the price if it ends in zero. For example, if the price is 0.40 cents, it comes back as 0.4. Now, my objective is to t ...

Dynamic Data Display

I'm experiencing an issue where the data is not displaying in the table div when using an Ajax call to load the table. The page appears blank upon return, and I have tried using $('#groupTable').load(data); without any success. If anyone can ...

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...