如何將Javascript值更改爲百分比而不是像素

Question

我想將我的scrolltop值從50px更改爲諸如讓用戶的屏幕顯示1％等內容。我怎麼可能會這樣做。我讀到的JS值可以是一個百分比，但它不適合我。下面是一個codepen我提出來演示效果：

[鏈接]（http://codepen.io/ericshio/pen/zBRbAY）

HTML：

<div class="filler"></div> 
<a href="#introjump"><img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/></a> 

CSS：

.down-arrow { 
    position: fixed; 
    bottom: 1%; 
    left: 50%; 
    max-width: 3.5%; 
    min-width: 3.5%; 
    width: 3.5%; 
    box-shadow: none; 
    opacity: 0.6; 
} 

.down-arrow:hover { 
    opacity: 1; 
} 


.filler { 
    height: 10000px; 
} 

JS：

$(window).scroll(function() { 
    $(".down-arrow").css("opacity", 1 - 
    $(window).scrollTop()/50); 
}); 

Answer 1

嘗試。

$(window).scroll(function() { 
    $(".down-arrow").css("opacity", 1 - 
    $(window).scrollTop()/$(document).height()*0.5); 
}); 

Answer 2

我是g uessing你想淡出的箭頭上滾動

$(window).scroll(function() { 
 
    $(".down-arrow").css("opacity", 1 - ($(window).scrollTop()/document.body.scrollHeight)); 
 
});

.down-arrow { 
 
    position: fixed; 
 
    bottom: 1%; 
 
    left: 50%; 
 
    max-width: 3.5%; 
 
    min-width: 3.5%; 
 
    width: 3.5%; 
 
    box-shadow: none; 
 
    opacity: 0.6; 
 
} 
 
.down-arrow:hover { 
 
    opacity: 1; 
 
} 
 
.filler { 
 
    height: 10000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filler"></div> 
 
<a href="#introjump"> 
 
    <img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht" /> 
 
</a>

Answer 3

試試這個

.down-arrow { 
 
    position: fixed; 
 
    bottom: 1%; 
 
    left: 50%; 
 
    max-width: 3.5%; 
 
    min-width: 3.5%; 
 
    width: 3.5%; 
 
    box-shadow: none; 
 
    opacity: 0.6; 
 
} 
 

 
.down-arrow:hover { 
 
    opacity: 1; 
 
} 
 

 

 
.filler { 
 
    height: 50%; 
 
}