基于滚动位置,我如何获得一个元素开始跟随(固定位置)50px然后停止跟随2000px?

时间:2015-11-24 22:10:55

标签: jquery css scroll position

我的图像需要相对或绝对定位才能开始,然后在稍微滚动后开始跟随,然后再次粘贴在页面上,然后用户继续进入另一个部分。我一直在使用这样的东西,但剧本显然与自己发生冲突:

<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,我基本上只需要应用“固定”类。有没有办法写出来?

1 个答案:

答案 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类添加样式。