滚动时模糊单个div？答案

【问题标题】：Blur individual div when scrolling?滚动时模糊单个div？
【发布时间】：2015-06-12 14:04:35
【问题描述】：

我有一个时间线，我希望第一个项目被聚焦，但是当滚动时我希望下一个项目成为焦点，下一个等等。到目前为止，我已经设法只让所有项目成为焦点。有什么想法我可以做到这一点吗？

这里是my fiddle 这是我的代码

$(document).ready(function(){


    $('.timeline li').not('.timeline li:first')
  .css({
                            'filter': 'blur(2px)',
                            '-webkit-filter': 'blur(2px)',
                            '-moz-filter': 'blur(2px)',
                            '-o-filter': 'blur(2px)',
                            '-ms-filter': 'blur(2px)'
                        });


    });

$(window).scroll(function(){
    var prevTop = $(window).data("top");
    var  newTop = $(this).scrollTop();
if(prevTop)
{
    if(prevTop>newTop )
    {
       $('.timeline li').not('.timeline li:first')
  .css({
                            'filter': 'blur(2px)',
                            '-webkit-filter': 'blur(2px)',
                            '-moz-filter': 'blur(2px)',
                            '-o-filter': 'blur(2px)',
                            '-ms-filter': 'blur(2px)'
                        });
    }
    else{
     $('.timeline li')
 .css({
                            'filter': 'blur(0px)',
                            '-webkit-filter': 'blur(0px)',
                            '-moz-filter': 'blur(0px)',
                            '-o-filter': 'blur(0px)',
                            '-ms-filter': 'blur(0px)'
                        });
    }
}
    $(window).data("top",newTop );

});



<div class="wraphold">
        <div class="timeline-title"><span>Timeline</span></div>
    <ul class="timeline">
        <li>

            <div class="dot"><div class="date"><span>21st JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>

            <div class="dot"><div class="date"><span>22nd JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>

            <div class="dot"><div class="date"><span>23rd JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>

            <div class="dot"><div class="date"><span>24th JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>

        <li>

            <div class="dot"><div class="date"><span>25th JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>

            <div class="dot"><div class="date"><span>26th JUNE</span></div></div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>

    </ul>
</div>

【问题讨论】：

@nikhil 如何远程解决问题？
我明白你的意思。已删除我的评论
请注意，这可能会导致滚动不稳定。

标签： javascript jquery html css timeline

【解决方案1】：

首先将此添加到您的 CSS，不要忘记为其他浏览器（如 FF 或 IE）添加过滤器。

.blur {
    filter: blur(2px);
    -webkit-filter:blur(2px);
}

把javascript改成这个

$(document).ready(function () {
    $('.timeline li').not('.timeline li:first').addClass("blur")
});
var $window = $(window);

function isScrolledIntoView($elem, $window) {
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var elements = $('.timeline li');
$(window).scroll(function () {
    elements.each(function () {
        $this = $(this);
        if (isScrolledIntoView($this, $window)) {
            $this.removeClass("blur");
        }
        else{
            $this.addClass("blur");
        }
    })
});

作为一个基本想法，如果您可以使用 css 类，请不要使用 .css 属性。

Fiddle 进行测试

更新 1 不是双向的，当它们消失时，元素会变得模糊

【讨论】：