can smooth scroll to a component cause other components to blur in 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 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

回答1:

Yes you can.

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.

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/

回答2:

Yes, there is a very simple filter property in CSS3 you can apply to all other elements if you wish to do so.

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

Do note this is not supported in IE. IE had an older property that worked up to IE8, but it doesn't work from IE9+

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

回答3:

I tried below Demo: Working Demo

Using 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;
            }
        }
    });
});

来源：https://stackoverflow.com/questions/29674817/can-smooth-scroll-to-a-component-cause-other-components-to-blur-in-jquery-css

标签

javascript

jquery

html

css

smooth-scrolling