Question

我正在玩一个jQuery小片段，该片段通过根据元素相对于窗口的偏移量来操纵“顶部”值来更改固定元素的位置。

我创建了这个jsFiddle以更好地说明我的意思： jsFiddle

这是简单的jQuery代码：

function switchIt () {
  $('.text-two').each(function() {
    $(this).css('top',
      $('.text-one').offset().top -  $(this).closest('.content').offset().top
    );
  });
};

$(document).scroll(function() {switchIt();});

switchIt();

它运作良好，但实际上我想使用css函数translateY()而不是top来更改位置。

例如：top: 100px;应该是transform: translateY(100px);

我知道这应该很容易，而且我很尴尬地展示了我尝试使其工作的步骤。我错过了一些非常简单的东西，但不知何故。

提前感谢您的时间。

Answer 1

您需要使用transfrom更改顶部并删除100px，这是CSS中添加的默认顶部值：

function switchIt () {
  $('.text-two').each(function() {
    $(this).css('transform','translateY('+(
      $('.text-one').offset().top -  $(this).closest('.content').offset().top-100)+'px)'
    );
  });
};

$(document).scroll(function() {switchIt();});

switchIt();

* {
  padding: 0;
  margin: 0;
}

.content {
  min-height: 100vh;
  overflow: hidden;
  position: relative;

}

.content div {
  top: 100px;
  left: 100px;
}

.text-one {
  position: fixed;
  color: blue
}

.text-two {
  position: absolute;
  color: white
}

.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
  <div class="text-one">Scroll down to see</div> 
</section>

<section class="content blue">
  <div class="text-two">Scroll down to see this Text changing</div> 
</section>

或者只是从CSS中删除顶部：

function switchIt () {
  $('.text-two').each(function() {
    $(this).css('transform','translateY('+(
      $('.text-one').offset().top -  $(this).closest('.content').offset().top)+'px)'
    );
  });
};

$(document).scroll(function() {switchIt();});

switchIt();

* {
  padding: 0;
  margin: 0;
}

.content {
  min-height: 100vh;
  overflow: hidden;
  position: relative;

}

.content div {
  left: 100px;
}

.text-one {
  position: fixed;
  top:100px;
  color: blue
}

.text-two {
  position: absolute;
  color: white
}

.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
  <div class="text-one">Scroll down to see</div> 
</section>

<section class="content blue">
  <div class="text-two">Scroll down to see this Text changing</div> 
</section>

Answer 2

只需为元素分配样式属性的transform属性

//using jquery
$('#one').css({transform:"translateY(100px)"});
//using vanilla JavaScript
document.getElementById('two').style.transform = "translateY(100px)";

#one, #two{
width:100px;
height:100px;
display:inline-block;
border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'>one</div>
<div id='two'>two</div>

因此您的代码段如下所示：

function switchIt () {
$('.text-two').each(function() {
    $(this).css('transform',
        "translateY("+($('.text-one').offset().top -  $(this).closest('.content').offset().top)+"px)"
    );
});
};

$(document).scroll(function() {switchIt();});

switchIt();

这是您使用translateY http://jsfiddle.net/4mnty3v7/

的小提琴的链接

如何使用jQuery基于offset（）。top操纵translateY（）

2 个答案: