Сергей Жубартович

Вот например

var nav = $('.nav');
$(window).scroll(function() {
  if ($(this).scrollTop > 0) {
    nav.addClass('sticky');
  } else {
    nav.removeClass('sticky');
  }
});

А для класса .sticky уже какие нужны стили можно задать

<div class="box">
  <img src="iphone.png" alt="">
</div>
<div class="next-box"></div>

.box {
  overflow: hidden;
}

.box img {
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
.next-box {
  position: relative;
}

.next-box:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: #28c8c6 url(down-icon.png) no-repeat  20px 10px;
  border-radius: 100%; 
  position: absolute
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

Что-то примерно такое

Текст находится внутри блока с filter: blur и поэтому он тоже размывается.
Нужно верстку сделать что-то типа:

<div class="news-image">
  <div class="news-blur" style="background: url(http://placehold.it/150x150);"></div>
  <div class="text-overlay"></div>
  <div class="news-title"><a href="#">Заголовок</a></div>
  <div class="news-date">24.02.2017</div>
</div>

И размывать не весь блок, а .news-blur