CODEWITHSUNDEEP
jqueryhtmlcss
T. Mongoven
T. Mongoven

Reputation: 23

I cannot get JQuery Scroll Function to work on my site

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.

Upvotes: 0

Views: 54

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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});

Upvotes: 2

user7636578
user7636578

Reputation:

are you using your scrip in head element? if yes this might be the problem.. place your <script> your function </script> at the end of the document before closing the </body> tag.

Upvotes: 0

Related Questions