我想将我的滚动顶部值从50px更改为类似于用户屏幕的1%。我怎么可能这样做呢。我在读这个JS值可能是一个百分比,但它对我不起作用。这是我用来展示效果的代码:
[link](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);
});
答案 0 :(得分:0)
我猜你正试图淡出滚动箭头
$(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>
答案 1 :(得分:0)
试试这个
.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%;
}
答案 2 :(得分:0)
试试这个。
$(window).scroll(function() {
$(".down-arrow").css("opacity", 1 -
$(window).scrollTop() / $(document).height()*0.5);
});