我的图像需要相对或绝对定位才能开始,然后在稍微滚动后开始跟随,然后再次粘贴在页面上,然后用户继续进入另一个部分。我一直在使用这样的东西,但剧本显然与自己发生冲突:
<script>
jQuery(document).ready(function(){
window.onscroll = function() {
if (window.pageYOffset <= 50){
jQuery('.stickem').css({position: 'absolute', top: '50px' });
}
else {
jQuery('.stickem').css({position: 'fixed', top: '50px'});
}
if (window.pageYOffset >= 2040){
jQuery('.stickem').css({position: 'absolute', top: '2040px' });
}
else {
jQuery('.stickem').css({position: 'fixed', top: '2040px'});
}
}
});
</script>
如果&gt; = 50px但是&lt; = 2040px,我基本上只需要应用“固定”类。有没有办法写出来?
答案 0 :(得分:0)
你可以试试这个:
myFunc({{human.fname}},{{human.lname}})
如果你想玩代码,这是一个小提琴:
https://jsfiddle.net/rgvap3jh/
根据需要为jQuery(document).ready(function() {
var fixedClassName = 'fixed';
var absoluteClassName = 'absolute';
var $window = jQuery(window);
var $stickem = jQuery('.stickem');
$window.on('scroll', function() {
var scrollTop = $window.scrollTop();
if (scrollTop > 2040) {
if ($stickem.hasClass(fixedClassName)) {
$stickem.removeClass(fixedClassName);
}
if (!$stickem.hasClass(absoluteClassName)) {
$stickem.addClass(absoluteClassName);
}
} else if (scrollTop >= 50 && scrollTop <= 2040) {
if (!$stickem.hasClass(fixedClassName)) {
$stickem.addClass(fixedClassName);
}
if ($stickem.hasClass(absoluteClassName)) {
$stickem.removeClass(absoluteClassName);
}
} else if ( $stickem.hasClass(fixedClassName) ) {
$stickem.removeClass(fixedClassName);
$stickem.removeClass(absoluteClassName);
}
});
});
和.fixed
类添加样式。