如何获取 css 转换值并使用 jquery 生成条件答案

【问题标题】：how to get css translate value and make into contidion with jquery如何获取 css 转换值并使用 jquery 生成条件
【发布时间】：2017-04-21 08:09:33
【问题描述】：

我正在尝试从 css 中获取价值并使其成为条件，我不知道它是否可行。我想获取 translateX 值并检查值是否为 200% 显示弹出窗口。

或者有没有其他方法可以做到这一点？谢谢

$(window).scroll(function() {
  var sTop = $(window).scrollTop();

  $('.box').css("transform", "translateX(" + sTop + "%)");
  if ($('.box').css("transform", "translateX") === 200) {
    alert('pop');
  }
});

.content {
  width: 100%;
  height: 1500px;
  background-color: yellow;
  position: relative;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 5%;
  width: 30px;
  height: 30px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
  <div class="box"></div>
</div>

【问题讨论】：

你有两个问题。首先，您需要在if 语句中使用css() 的getter，例如.css('transform')。其次，它将以这种格式返回一个字符串，您需要对其进行剖析以获得所需的值：matrix(1, 0, 0, 1, 15.9, 0)
有没有简单的方法来获取转换值？我确实尝试获取诸如marginTop和显示之类的值，并且效果很好。但是获取转换值有点令人困惑
你可以使用正则表达式：stackoverflow.com/a/21522812/519413

标签： jquery css scroll

【解决方案1】：

就像来自 cmets 的暗示（我还不能写）：http://jsfiddle.net/ax5nM/107/

var t=$(".box").css('transform').split(/[()]/)[1].split(',');
var m="X: " + t[4] + "px; Y: " + t[5] + "px; (" + t +")";
$(".msg").text( m ).fadeIn();
if (t[4] >= 20 && !popped) {
    popped=true;
  alert('pop');
}

滚动一下后，我会弹出这个。

【讨论】：