可以平滑滚动到一个组件导致其他组件在jquery / css中模糊？ [英] can smooth scroll to a component cause other components to blur in jquery/css?

问题描述

我正在使用此处提出的解决方案 jQuery scrollTo - 中心窗口中的div垂直，它的工作原理，当我点击我的网页上的一些链接，我立即看到平滑滚动停止，当我的标题在屏幕的中间。但是，我有上面和下面的几个其他组件，所以我想到模糊它们，直到用户向上或向下滚动 - 是可能的jquery或css？

I'm using the solution proposed here jQuery scrollTo - Center Div in Window Vertically and it works, when I hit some link on my webpage, I immediately see smooth scrolling that stops when my header is in the middle of the screen. However, I have several other components above and below, so I thought about bluring them until the user scrolls up or down - is that even possible in jquery or css?

I准备小 jsfiddle 代码到目前为止，我只是麻烦附加jquery库本身，所以平滑滚动现在可以看到那里...但所有在所有我使用下面的脚本：

I prepared small jsfiddle with the code so far, I just have trouble with attaching jquery library itself, so the smooth scroll might now be visible there... But all in all I'm using the following script:

$('#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;
});

EDIT ::我将此问题标记为已解决，因为正确答案如下，我后来，它不工作在我的情况。这就是为什么我决定提出另一个问题这里

: I marked this quesion as solved since the correct answer was given below, however it appeard to me later on that it doesn't work in my case. That's why I've decided to ask another question here

推荐答案

是的。

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

You can use SmoothScroll’s beforeScroll event to blur all elements except the one you’re scrolling to.

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

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

Then, remove opacity when you’re scrolling.

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

要防止在每次滚动时触发动画，请查看编辑的小提琴。

To prevent animations being triggered on every scroll, check out the edited fiddle.

您可以使用add和remove类只需在CSS文件中保持样式。

Instead of applying CSS directly, you can use add and remove classes to keep styling exclusively in your CSS files.

https： //jsfiddle.net/ea67uqd6/4/

这篇关于可以平滑滚动到一个组件导致其他组件在jquery / css中模糊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！