animate on scroll does not work on element

Question

Trying to make my section1 animate on scroll. But it doesn't seem to work, which confuses me, since I've already used this scroll code on another element, which works fine. That element, however, does not start 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> 

Answer 1

I not understand exactly what you want, but if you use a container without scrollbar or just you want detect when user scroll, You can use DOMMouseScroll for detect when scroll. This work fine. Please try below:

 $('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 have two window.scroll function who make same things. You can join two:

var main = function() {

    var scrollState = 'top';
    //rowheader
    $(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

First of, one thing that might not be working for you is that you after 150px might have scrolled the section out of view. In this case you should use a fixed position or define a top distance.

Secondly I would recommend that you use CSS for defining the visibility of the element rather than jQuery or javascript.

Please check out this fiddle for a demo with fixed position on the section element. https://jsfiddle.net/cazdt0gj/

By adding classes you don't have to worry about "the scrolled" part of your code as well.

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