Question

我编写了一个小脚本，将元素.wrap移动到DOM下方的滚动（＆gt; = 100）上，然后在此移动的元素到达页面顶部后设置position:fixed; top:0;

结果很遗憾。该元素移动位置，然后锁定到屏幕顶部就好了，但是当您尝试向上滚动页面时，重新定位的元素（现在锁定在页面顶部）在滚动~~时闪烁我也只是当你滚动到页面顶部时，我意识到.wrap没有移回原来的位置~~（问题已解决。请参阅下面的评论）。我也关注性能，因为我正在使用滚动事件处理程序。

有关此问题的示例，请参阅此Fiddle。

作为奖励，我试图在元素移动之前添加淡入/淡出。这里的任何帮助将不胜感激。

$(window).scroll(function () {
    if ($(this).scrollTop() >= 100) {
        /*$('.wrap').fadeOut('slow');
        $.when( setTimeout(function() {  
            $('.wrap').insertAfter('.jumbotron').addClass('moved');
        }, 2000) ).then(function( ) {
            $('.wrap.moved').fadeIn('slow'); 
        });*/
        $('.wrap').insertAfter('.jumbotron').addClass('moved');
        var stickyHeader = $('.wrap.moved').offset().top;
        $(window).scroll(function () {
            if ($(window).scrollTop() > stickyHeader) {
                $('.wrap.moved').css({
                    position: 'fixed',
                    top: '0px'
                });

            } else {
                $('.wrap.moved').css({
                    position: 'static',
                    top: '0px'
                });

            }
        })
    } else {
        $('.wrap').insertBefore('.space').removeClass('moved');

    }
});

Answer 1

当您尝试向上滚动页面时重新定位的元素（现在锁定到页面顶部）滚动时闪烁

这是因为当滚动小于100时，你不断地做insertBefore。反之亦然。

要解决此问题，请使用变量来缓存状态。将逻辑包装在检查状态的条件中，然后才启动代码。像这样：

var sticky = false;
$(window).scroll(function () {
    if ($(this).scrollTop() >= 100) {
        if (!sticky) {
            //... your logic here
            sticky = true;
        }
    } else {
        if (sticky) {
            $('.wrap').insertBefore('.space').removeClass('moved');
            sticky = false;
        }
    }
});

你的小提琴：http://jsfiddle.net/abhitalks/kmx4w83w/3/

在DOM中滚动移动元素，稍后锁定到屏幕顶部

1 个答案: