Question

我在另一个div中有一个position:absolute;的div。我有脚本通过在用户滚动窗口时更改其顶部位置来制作子div视差。除了野生动物园，它的效果很好。位置div的百分比为top。但是在脚本中它被转换为像素并再次分配。我知道这有问题，因为jquery没有为百分比返回正确的像素值（因为jQuery只返回像素值）。 stackoverflow和其他站点有很多变通方法，比如直接访问DOM或访问样式表值，但我想要一个jQuery解决方案。以下是提到的视差：

var initScrollPostion = $(window).scrollTop();
var scrollDirection = 0;

$.fn.extend({
  sliderParallax: function(offsetTop) {

    var parallaxElement = $(this).find('.portfolio-description');

    var scrollPosition = parseFloat($(window).scrollTop());
    var currentPositionTop = parseFloat($(this).offset().top);
    var currentHeight = parseFloat($(this).outerHeight());

    if (scrollPosition > currentPositionTop - parseFloat(offsetTop) && scrollPosition - currentPositionTop < currentHeight) {
      var scrollPortion = scrollPosition - currentPositionTop;
    }

    if ($(window).width() > 768) {
      var parallxTop = -1 * scrollPortion * 0.5 + parseFloat(offsetTop) / 2;
    } else {
      var parallxTop = -1 * scrollPortion * 0.2 + currentHeight / 4;
    }

    parallaxElement.css('top', parallxTop + 'px');

  }
});

var offset = $('.portfolio-description').css('top');

$(window).scroll(function() {
  $('.portfolio-content').sliderParallax(offset);
});

img {
  width: 100%;
}
.portfolio-description {
  position: absolute;
  right: 18%;
  top: 63%;
  font-family: havelTall;
  color: #000000;
  text-transform: uppercase;
  text-align: right;
}
.portfolio-description > .port-desc-header {
  font-size: 132px;
  letter-spacing: -4px;
}
.portfolio-description > .port-desc-desc {
  font-size: 54px;
  margin-left: 41px;
  margin-top: -43px;
  letter-spacing: 0.3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 portfolio-content">
  <img src="http://lorempixel.com/output/city-q-c-640-480-3.jpg" alt="" />

  <div class="portfolio-description">
    <div class="port-desc-header">stand-out</div>
    <div class="port-desc-desc">mens fasion website</div>
  </div>
</div>

有没有任何方法可以使用jQuery在safari上进行这项工作？帮助将不胜感激。

PS：我发现问题确实在var offset = $('.portfolio-description').css('top');，因为它返回零。有什么想法吗？

jQuery css top在safari中返回零

0 个答案: