2017-07-18 20 views
-1

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

  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 
    } 
    }); 
}); 
+0

そのためにはjqueryが必要です。あなたのjsコードはどこですか? –

+0

私は最後にフィドルでそれを加えました。 – Rahul

+0

jsはありません。 –

答えて

0

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

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

+0

いいえ、それは私の目的を解決していないし、cssだけでもやっている可能性があります(位置:sticky) – Rahul

+0

psotionをしようとしているものから:stickyはすべての側面をカバーしません。 位置:スティッキーは特定の要素の位置を決めますが、記述しているロジックをイベントでトリガーする必要があります。なぜスクロールイベントを推奨するのですか?私はそれを試してみることをお勧めします。 – ThunD3eR

+1

このリンクは質問に答えるかもしれませんが、答えの本質的な部分をここに含めて参考にしてください。リンクされたページが変更された場合、リンクのみの回答は無効になります。 - [レビューの投稿](レビュー/低品質の投稿/ 16748206) –

0

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

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if($(window).scrollTop() < 350) { 
      $("header").show(); 
      $(".newswrap").hide(); 
     } else { 
      $("header").hide(); 
      $(".newswrap").show(); 
     } 
    }); 
}); 
関連する問題