The animation triggered by scrolling is not functioning on this element

I'm currently attempting to add a scroll animation to my section1 element, but for some reason, it's not working. This is puzzling to me because I've successfully implemented the same scroll code on another element without any issues. The only difference is that the other element is visible from the start, while section1 is initially off-screen.

Here's my code:

$(window).scroll(function(){ 
//section1
    var scrollPos = $(window).scrollTop();

    if( ( scrollPos > 150 ) && ( scrollState === 'top' ) ) {
        $("#section1").animate({left: '60'}, 700);
        scrollState = 'scrolled';
    }    
});
#section1 {
text-align: center; 
margin-top: 3em;
margin-bottom: 3em; 
font-size: 1em;
height: auto;
font-family: 'Open Sans', sans-serif;
position: relative;
left: -60em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1" class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablabla </p>
</div>
</div>
</div>

javascriptjqueryhtmlcss

Answer №1

I'm not entirely sure what you're looking for, but if you need to work with a container that doesn't have a scrollbar or if you want to detect when the user scrolls, you can use the DOMMouseScroll event to achieve this. It works well. Here's an example code snippet:

$('html').on ('DOMMouseScroll', function (e) {
    if(e.originalEvent.detail  < 0) {
      $("#section1").animate({left: '-60em'}, 700);
    } else {
      $("#section1").animate({left: '60'}, 700);
    }
});
#section1 {
text-align: center; 
margin-top: 3em;
margin-bottom: 3em; 
font-size: 1em;
height: auto;
font-family: 'Open Sans', sans-serif;
position: relative;
left: -60em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="section1" class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablabla </p>
</div>
</div>
</div>

UPDATE

You currently have two separate window.scroll functions doing the same thing. You can combine them into one for efficiency:

var main = function() {

    var scrollState = 'top';
    
    $(window).scroll(function(){ 

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

        if( ( scrollPos > 150 ) && ( scrollState === 'top' ) ) {
            $("#rowheader h1").animate({left: '-20em'}, 700);
            $("#section1").animate({left: '60'}, 700);
            scrollState = 'scrolled';
        }       
        else if( ( scrollPos <= 150 ) && ( scrollState === 'scrolled' ) ) {
            $("#rowheader h1").animate({left: '0'}, 500);
            scrollState = 'top';
        }
    });

};

$(document).ready(main);

Answer №2

One issue you may be encountering is that once the section is scrolled past 150px, it becomes out of view. To address this, consider using a fixed position or defining a specific top distance.

Additionally, it is advisable to utilize CSS for controlling the visibility of the element rather than relying on jQuery or javascript.

For a demonstration featuring fixed positioning on the section element, please refer to this fiddle: https://jsfiddle.net/cazdt0gj/

By incorporating classes, you can simplify your code and eliminate concerns about the "scrolled" portion as well.

$("#section1").addClass('active')

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

Tips on displaying an avatar above and outside the boundaries of a background element using Chakra UI

They say a picture is worth more than a thousand words, and in this case, it holds true. The best way to illustrate what I'm trying to accomplish is through the image linked below. https://i.stack.imgur.com/5WvkV.png I envision having the avatar po ...

htmlcssreactjsuser-interfacechakra-ui

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Master the art of string slicing in JavaScript with these simple steps

I am attempting to utilize the slice function to remove the first three characters of a string within a JSON object. $(document).ready(function() { $.ajaxSetup({ cache: false }); setInterval(function() { $.getJSON("IOCounter.html", functio ...

javascripthtmljsonajax

Getting the document ID from a faunaDb query: a step-by-step guide

One array that I am dealing with consists of the following: [ Ref(Collection("twitch_users"), "280881231730573837") ] My goal is to extract the string of numbers from this array and utilize it in another function within my codebase. Ho ...

javascriptarraysjsonfaunadb

Working with post metadata in functions.php and making AJAX requests

I may be inexperienced, but I am struggling with this issue. Why is it that when I perform the following: function my_f() { $sss = 'some data'; echo ($sss); die(); } add_action('wp_ajax_nopriv_my_f', 'my_f'); add_acti ...

jqueryajaxwordpress

Discord bot in Node.js, Remove old embed message upon receiving a slash command

My bot is programmed to send an embed message whenever it receives a /xyz command, and the code looks something like this: client.on("interactionCreate", async (interaction) => { if (!interaction.isCommand()) return; const ...

javascriptnode.jsdiscord.js

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

javascriptjqueryhtmlcssless

Adjust the width of the dropdown menu to match the size of the input box

Within my input box in Bootstrap 4, there is a dropdown button located on the right. Upon clicking the button, a dropdown-menu is displayed. Inside the menu, there is an Angular component containing a table. <link rel="stylesheet" href="https://stack ...

htmlangulardrop-down-menubootstrap-4dropdown

Custom JSX element failing to include children during addition

I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...

htmltypescriptnestedjsx

Delete a specific character sequence from a PHP form before storing it in a MySQL database

My Objective: I aim to utilize a straightforward PHP form to transfer data to a MySQL database. However, in cases where the input includes a specific string, I intend to eliminate it before storing it in the MySQL database. For instance: if the input ...

phphtml

Changing the colors of multiple buttons in a React Redux form: a step-by-step guide

When using Redux Form Wizard on the second page, I have two buttons that ask for the user's gender - Male or Female. The goal is to make it so that when a user clicks on either button, only that specific button will turn orange from black text. You ...

javascriptreactjsbuttonredux-form

Styling only for Angular 2 Components

How can component scoped styles be used to style elements differently based on their location within the site while still maintaining style scoping? For example, when using a "heart like" item created in this course, how can padding be added specifically i ...

javascriptcssangular

Guide on how to perform a POST request within a service worker?

I am faced with the challenge of sending a POST request to the back-end every time a client clicks on a Push notification from the front-end, in order to confirm that the client has received the notification. Here is the system I currently have in place f ...

javascriptnode.jsvue.jspostworkbox

No need for jQuery with this scrolling image gallery

I recently created a horizontal scrolling image gallery with thumbnails underneath. The goal is to click on a thumbnail and have the corresponding image scroll into view. Here's the HTML setup: <div class="images_container"> <img id="imag ...

javascripthtmlcssimage

Applying a CSS class to a jeditable input field

Is there a way to apply a simple class tag to a jeditable input field? The developer's instructions on their website () suggest using the following code snippet under "How to style elements?": $('.editable').editable('http://www.exampl ...

cssjeditable

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

javascripthtmlcss

Problem with Internet Explorer

There seems to be an issue with the center content on this website. In Internet Explorer, a few letters are getting cut off by the sidebar. I've tried adding some extra margin to the right, but it didn't solve the problem. It's happening on ...

cssinternet-explorerhtmlmargins

Is it possible that the method of wrapping options using an array is not functioning correctly in the quiz app being managed in React?

I need your help in figuring out where I've made a mistake. The following line is causing an error: const choices = Array.forms(document.querySelectorAll('.choice')); console.log(choices); ...

javascriptreactjs

What is the best way to adjust the size of an image within a block layout using either JavaScript or React?

I have a game to create, and I need a block of elements to be aligned like the image below. However, the kangaroo image is not displaying correctly. The actual size of the image is width:70px and height:100px. But I want to resize it to width: 49px and h ...

javascriptreactjs

The alignment of Flex Divs is off despite having identical heights

I'm facing an issue where divs are not staying at the top of their parent div if the image they contain does not have the same height as the others. Within my navbar, I have icons of varying sizes placed inside divs using display: flex to vertically ...

htmlcssflexbox