Edit in JSFiddle

var fixed_class = 'is_fixes',
  $fixes_area = $('#fixes_area'),
  $main = $("article"),
  fixes_pos = $fixes_area.offset().top,
  fixes_h = $fixes_area.outerHeight();

$(window).on('scroll', function() {
  var value = jQuery(this).scrollTop();

  if (value > fixes_pos) {
    //
    $fixes_area.addClass(fixed_class);
    $main.css({
      "margin-top": fixes_h
    });
  } else {
    $fixes_area.removeClass(fixed_class);
    $main.css({
      "margin-top": 0
    });
  }
});

<header>

  <p>ここは固定しない</p>
  <p id="fixes_area">
    ここはスクロールで固定する
  </p>
 
</header>
<article>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
  <p>ここはメインのコンテンツの部分
  </p>
</article>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  background-color: #dfdfdf;
  width: 100%;
}

header p {
  padding: 3%;
}

header p#fixes_area {
  height: 120px;
  background-color: #ffff00;
}

article {
  padding: 5%;
  height: 1200px;
}


/* 固定させる為のCSS */

.is_fixes {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}