How to manipulate translateY() based on offset().top using jQuery

问题: I am playing with a little jQuery snippet that changes the position of a fixed element by manipulating the "top" value based on the offset of the element from the window....

问题:

I am playing with a little jQuery snippet that changes the position of a fixed element by manipulating the "top" value based on the offset of the element from the window.

I have created this jsFiddle to better illustrate what I mean: jsFiddle

Here is the simple jQuery code:

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

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

switchIt();

It works well but I would actually like to change the position using the css function translateY() instead of top.

For example: top: 100px; shoud be transform: translateY(100px);

I know this should be easy and I'm a embarrassed to show the steps I've tried to get this to work. I'm missing something very simple but somehow can't find out where.

Thanks in advance for your time.


回答1:

You need to change top with transfrom AND remove 100px which is the default top value added in the 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>

Or simply remove the top from the 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>


回答2:

just assign the transform property of the style property for the element

//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>

So your code snippet would look like:

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();

here's a link to your fiddle working with the translateY http://jsfiddle.net/4mnty3v7/

  • 发表于 2018-07-11 17:58
  • 阅读 ( 310 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除