平滑滚动到一个组件会导致其他组件在 jquery/css 中模糊吗？

Question

我正在使用这里提出的解决方案 jQuery scrollTo - Center Div in Window Vertically 并且它有效，当我在我的网页上点击一些 link 时，我立即看到流畅的滚动，当我的 header 是在屏幕中间。但是，我在上方和下方还有其他几个组件，所以我考虑过模糊它们直到用户向上或向下滚动 - 在 jquery 或 css 中甚至可能吗？

到目前为止，我用代码准备了小 jsfiddle，我只是在附加 jquery 库本身时遇到了问题，所以现在可以在那里看到平滑的滚动...但总而言之，我我正在使用以下脚本：

$('#borders a').on('click', function(e) { 
  var el = $( e.target.getAttribute('href') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }

  $.smoothScroll({ speed: 700 }, offset);
  return false;
});

编辑::我将此问题标记为已解决，因为下面给出了正确答案，但后来我觉得它对我的情况不起作用。这就是为什么我决定再问一个问题 here

Answer 1

是的，CSS3 中有一个非常简单的 filter 属性，如果您愿意，可以将其应用于所有其他元素。

filter: blur(5px);
-webkit-filter: blur(5px);

请注意，IE 不支持此功能。 IE 有一个较旧的属性可以运行到 IE8，但它不适用于 IE9+

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');

Answer 2

我尝试了下面的演示： Working Demo

使用JQuery：

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 3

是的，你可以。

您可以使用 SmoothScroll 的 beforeScroll 事件来模糊除滚动到的元素之外的所有元素。

$.smoothScroll({
    afterScroll: function() {
        $('.el').not(target).animate({ opacity: 0.25 });
    }
});

然后，在滚动时移除不透明度。

$(window).on('scroll', function() {
    $('.el').animate({ opacity: 1 });
});

要防止在每次滚动时触发动画，请查看 the edited fiddle。

不是直接应用 CSS，您可以使用添加和删除类在 CSS 文件中保留样式。

https://jsfiddle.net/ea67uqd6/4/

平滑滚动到一个组件会导致其他组件在 jquery/css 中模糊吗？

can smooth scroll to a component cause other components to blur in jquery/css?

javascript

jquery

html

css

smooth-scrolling

使用JQuery：