Question

我想将我的滚动顶部值从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);
});

Answer 1

我猜你正试图淡出滚动箭头

$(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 2

试试这个

.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%;
}

Answer 3

试试这个。

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

如何将Javascript值更改为百分比而不是像素

3 个答案: