CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12487

Javascript calculation - can't get number to reduce, only increase

I've got a parallax header nearly working, the only issue is as you scroll down the header is meant to fade out but I can only get it to increase the opacity rather than decrease it, i.e I end up with opacity: 1.3 when I scroll down instead of 0.7.

This is the [demo]: 

$(window).scroll(function(e) {
  var scrolled = $(window).scrollTop(),
    header = $('.site-header');
    header.css('top', -(scrolled) * 0.5 + 'px');

  var scrollPos = scrolled - ($(document).height() - $(window).height() - 470);
  var position = scrollPos / 10;
  var opacity = (scrollPos * 1) / 470;

  $('.site-header').css({
    "opacity": opacity,
    "position": position + '%'
  });
});

Now it should be really simple, like multiplying it by -1 or similar, but I simply can't get it to give me the result. It either adds to it, or makes the header disappear completely but ending up with a negative value like opacity: -1.3

Upvotes: 0

Views: 47

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Use

var opacity = 2 - (scrollPos / 470);

instead.

opacity is subtracting from 1.0 to increase transparency.

Because scrollPos will always be 470, start with 2 to compensate that the top of the page will be 2 - (470 / 470) = 1.

Once the header is sufficiently faded out, there's no need to call .css anymore either.

if(opacity >= 0)
{
  $('.site-header').css({
    "opacity": opacity,
    "position": position + '%'
  });
}

Upvotes: 2

Related Questions