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

时间:2016-07-25 19:43:45

标签: javascript jquery html css wordpress

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

3 个答案:

答案 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);
});