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

Question

我正在使用此处提出的解决方案 jQuery scrollTo - Center Div in Window Vertically它有效，当我点击我网页上的某个链接时，我立即看到当我的标题位于屏幕中间时停止的平滑滚动。但是，我在上方和下方还有其他几个组件，所以我考虑将它们模糊化，直到用户向上或向下滚动 - 这在 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

是的，你可以。

您可以使用 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/