I cannot get JQuery Scroll Function to work on my site

T. Mongoven

I am attempting an effect much like the one seen on https://codepen.io/michaeldoyle/pen/Bhsif?editors=0010 The problem is that, for some reason, it doesn't work at all on my site http://pmoore17.altervista.org/TWADrama/index.php I am trying to get the slideshow to phase out while the content phases in, and vise versa. Help?

My JQuery:

    var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrapper");

    $(window).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height / 2;
      var calc = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calc
      });

      if (calc > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calc < '0') {
        hidetop.css({
          'opacity': 0
        });
      }

    });

My JQuery is currently deleted off my site because it was only increasing load time and causing images not to load.

Louys Patrice Bessette

Ok, I got it.

Remove the division by 2 in offset = offset + height / 2;.

So like this: offset = offset + height;

Also, test it with a longer page.
or - just for the test - add this:

$("#wrapper").css({"height":2000});

Collected from the Internet

Please contact [email protected] to delete if infringement.