Opacity according to Page Scroll

I imagine you want something like this:

The opacity calculation is equivalent to:

opacidade = valorInicial * (1 - scrollTop / 100vh)

Being 100vh represented by $(window).height() .

Javascript :

$(document).on('scroll', function(){
  var max = 0.7; //Valor inicial, que também deve ser ajustado no css
  var opacity = max * (1 - $(this).scrollTop() / $(window).height()); 
  $('div p').css('opacity', opacity);
  $('div p span').html($('div p').css('opacity'));
})

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
div {
  width: 100%;
  background: #333;
  height: 100vh;
  position: relative;
}
div:nth-child(odd) {
  background: #666;
}
div p {
  display: block;
  width: 100%;
  font-size: 6vw;
  text-align: center;
  opacity: 0.7;
  position: absolute;
  line-height: 40px;
  bottom: 10px;
  color: #fff;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><p>Minhaopacidadeé:<br><span></span></p></div><div></div>

JsFiddle

  

in position 0vh it would be 0.7 and in position 100vh it would be 0.1

By running your function on the site you've submitted, it does not behave as you expect. If you try to run and log the values in the console and scroll down the page, you will realize that the first value returned by it is 0 and the subsequent values are negative numbers.

$(window).scroll(function() {
  $('ID').css('opacity', parseInt(1 - ($(this).scrollTop()/100)*1))
  console.log(parseInt(1 - ($(this).scrollTop()/100)*1))
});

Here is the output as I scroll down the page:

> Object { length: 1, 1 more… }
> 0
This site appears to use a scroll-linked positioning effect.
This may not work well with asynchronous panning;
see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
for further details and to join the discussion on related tools
and features!
> 0
> -0
> -1
> -2
> -3

What is this VH measure you are trying to use? Could you upar a version of your page without any change in the opacity of the button for me to do some tests here? Thanks.

Thanks to our friend below, I got the following code that I will leave for those who also need this kind of help.

    $(document).on('scroll', function() {
    var max = 0.3;
    var mim = 0.1;
    var opacity = max * (1 - $(this).scrollTop() / $(window).height());
    if (opacity > mim) {
        var opacity = opacity;
    } else {
        var opacity = mim; }
    $('ELEMENTO').css('opacity', opacity); });