问题:
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/