title: Fade in and out elements with jquery
body: <p>Right now Im having two issues with the code that Im not able to fix:</p>
  
  <p>1) In jsfiddle the items fade in when scrolling down, but when I try it with sublime (or notepad ++) the fade in only works when refreshing the page and on scroll-up.</p>
  
  <p>2) For the fade out I tried to add this part to the code but its no working. What is worse its actually breaking the first fade in (this issue happens in both jsfiddle and local)</p>
  
  <pre><code> //check if this current container is within view
      if ((element_bottom_position &gt;= window_top_position) &amp;&amp;
        (element_top_position &lt;= window_bottom_position)) {
        $(this).animate({'opacity':'1'},500);
      } else {
            $(this).animate({'opacity':'0'},500);
        }
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/ja5nz1ux/" rel="nofollow noreferrer">https://jsfiddle.net/ja5nz1ux/</a></p>
  
  <p>(For the moment I'm doing everything in the html itself)</p>
  
  <p>The code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML&gt;
  
  &lt;HEAD&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      .timeline {
        --uiTimelineMainColor: var(--timelineMainColor, #008080);
        --uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
        position: relative;
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      
      .timeline:before {
        content: "";
        width: 4px;
        height: 100%;
        /* Color line */
        background-color: #2e4053;
        position: absolute;
        top: 0;
      }
      
      .timeline__group {
        position: relative;
        opacity: 1;
      }
      
      .timeline__group:not(:first-of-type) {
        margin-top: 4rem;
      }
      
      .timeline__year {
        padding: .5rem 1.5rem;
        color: var(--uiTimelineSecondaryColor);
        background-color: var(--uiTimelineMainColor);
        position: absolute;
        left: 0;
        top: 0;
      }
      
      .timeline__box {
        position: relative;
        opacity: 0;
      }
      
      .timeline__box:not(:last-of-type) {
        margin-bottom: 30px;
      }
      
      .timeline__box:before {
        content: "";
        width: 100%;
        height: 2px;
        /* color line middle */
        background-color: #c39bd3;
        position: absolute;
        left: 0;
        z-index: -1;
      }
      
      .timeline__date {
        min-width: 65px;
        position: absolute;
        left: 0;
        box-sizing: border-box;
        padding: .5rem 1.5rem;
        text-align: center;
        /* color box */
        background-color: #008080;
        color: var(--uiTimelineSecondaryColor);
      }
      
      .timeline__day {
        font-size: 2rem;
        font-weight: 700;
        display: block;
      }
      
      .timeline__month {
        display: block;
        font-size: .8em;
        text-transform: uppercase;
      }
      
      .timeline__post {
        padding: 1.5rem 2rem;
        border-radius: 2px;
        /* color box text */
        border-left: 3px solid #c39bd3;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24);
        background-color: var(--uiTimelineSecondaryColor);
      }
      
      @media screen and (min-width: 641px) {
        .timeline:before {
          left: 30px;
        }
        .timeline__group {
          padding-top: 55px;
          opacity: 1;
        }
        .timeline__box {
          padding-left: 80px;
        }
        .timeline__box:before {
          top: 50%;
          transform: translateY(-50%);
        }
        .timeline__date {
          top: 50%;
          margin-top: -27px;
        }
      }
      
      @media screen and (max-width: 640px) {
        .timeline:before {
          left: 0;
        }
        .timeline__group {
          padding-top: 40px;
          opacity: 1;
        }
        .timeline__box {
          padding-left: 20px;
          padding-top: 70px;
        }
        .timeline__box:before {
          top: 90px;
        }
        .timeline__date {
          top: 0;
        }
      }
      
      .timeline {
        --timelineMainColor: #4557bb;
        font-size: 16px;
      }
      /*
     =====
     DEMO
     =====
     */
      
      @media (min-width: 768px) {
        html {
          font-size: 62.5%;
        }
      }
      
      @media (max-width: 767px) {
        html {
          font-size: 55%;
        }
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
        font-size: 1.6rem;
        color: # #008080;
        background-color: #f0f0f0;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
      }
      
      p {
        margin-top: 0;
        margin-bottom: 1.5rem;
        line-height: 1.5;
      }
      
      p:last-child {
        margin-bottom: 0;
      }
      
      .page {
        max-width: 800px;
        padding: 10rem 2rem 3rem;
        margin-left: auto;
        margin-right: auto;
        order: 1;
      }
    &lt;/style&gt;
  &lt;/HEAD&gt;
  
  &lt;BODY&gt;
  
    &lt;div class="page"&gt;
      &lt;div class="timeline"&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;1&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 1 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;2&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 2 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;3&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 3 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;4&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 4 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;5&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 5 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;6&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 6 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;7&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 7 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;8&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 8 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;9&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 9 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;10&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 10 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;11&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 11 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;12&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 12 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;13&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 13 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;14&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 14 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;15&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 15 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="timeline__group"&gt;
          &lt;div class="timeline__box"&gt;
            &lt;div class="timeline__date"&gt;
              &lt;span class="timeline__month"&gt;Day&lt;/span&gt;
              &lt;span class="timeline__day"&gt;16&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="timeline__post"&gt;
              &lt;div class="timeline__content"&gt;
                &lt;p&gt; test 16 &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;script&gt;
      var $animation_elements = $('.timeline__box');
      var $window = $(window);
  
      function check_if_in_view() {
        var window_height = $window.height();
        var window_top_position = $window.scrollTop();
        var window_bottom_position = (window_top_position + window_height);
  
        $.each($animation_elements, function() {
          var $element = $(this);
          var element_height = $element.outerHeight();
          var element_top_position = $element.offset().top;
          var element_bottom_position = (element_top_position + element_height);
  
          //check to see if this current container is within viewport
          if ((element_bottom_position &gt;= window_top_position) &amp;&amp;
            (element_top_position &lt;= window_bottom_position)) {
            $(this).animate({
              'opacity': '1'
            }, 500);
          }
        });
      }
  
      $window.on('scroll resize', check_if_in_view);
      $window.trigger('scroll');
    &lt;/script&gt;
  &lt;/BODY&gt;
  
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>