スクロールでヘッダーを非表示にして下にスクロール

Question

ユーザーがページのスクロールを開始するときに、ヘッダーを非表示にして上部に（ヘッダーのすぐ下に）スティックします。

1. ユーザーがトップから350pxに達するまで、トップに留まる必要があります。
2. ユーザーが上にスクロールすると、ヘッダーのみが表示され、下にはdivは表示されません。

私はcss（固着した固定位置）で試しましたが、望みの結果が得られていません。

は、ここに私のfiddle

だここで私は（誰かの助けを借りて）みましたが、これは私が達成しようとしているもののわずか25％であることが（私はそれで良いではないよ）jQueryの。

$(function(){ 
    $(window).scroll(function(e) { 
    if($(this).scrollTop()>300){ 
     $('.header').fadeOut(); // Fading in the button on scroll after 300px 
    } 
    else{ 
     $('.header').fadeIn(); // Fading out the button on scroll if less than 300px 
    } 
    }); 
}); 

Answer 1

cssでこれを行う。フルsoloutionのコメントでjquerys Scroll event、可能soloution

$(window).scroll(function(e){ 
    var $el = $('.fixedElement'); 
    var isPositionFixed = ($el.css('position') == 'fixed'); 
    if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
    } 
    if ($(this).scrollTop() < 200 && isPositionFixed) 
    { 
    $('.fixedElement').css({'position': 'static', 'top': '0px'}); 
    } 
}); 

追加リンクをチェックしてください。

Answer 2

ヘッダーと.newswrapをposition: fixedに設定する必要があります。その後、これは動作します。

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if($(window).scrollTop() < 350) { 
      $("header").show(); 
      $(".newswrap").hide(); 
     } else { 
      $("header").hide(); 
      $(".newswrap").show(); 
     } 
    }); 
});