ブートストラップ/ CSS固定ヘッダは、ここで

は私のコード https://jsfiddle.net/muchproblem/w5db40wx/ブートストラップ/ CSS固定ヘッダは、ここで

である私は、ウェブ開発に初心者です、と私はスクロールダウンしたときにdiv要素を修正する方法、（多分愚かな）質問を思い付く大きなジャンプを得ました。

1）mainheader、スクロールダウン時にブートストラップヘッダーの下に修正したい 2）名前を付けて、スクロールダウンするときに「非表示」にしたい。

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 80) { 
    $('.mainheader').addClass('fixed') 
    } else { 
    $(".mainheader").removeClass('fixed'); 
    } 
}); 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 80) { 
    $('.namecard').hide 
    } else { 
    $(".namecard").show); 
} 
});

しかし、スクロールダウンしたときに「mainheader」が固定されていると「名刺」が隠されてしまったときに、コンテンツ内の行の一部がなることができませんでしたように私のコードをテストした後、それは、「大きな飛び」を得ました誰かがこれについていくつかの助けをすることができます。

ありがとうございます!!!

出典

2016-08-25 muchproblem

は、なぜあなたは固定*れ*それ 'onScroll'は、単にその'位置を設定します。デフォルトでfixed'、あなたが何かをしたい場合は、 'onScroll'、あなたはね、そのクラスのために書きます'onScroll'を追加すると確実にジャンプしません – vivekkupadhyay

これを試してください： ".mainheader"に余白を付けてください。 margin topの値は固定ヘッダの高さの高さと等しいかそれよりも大きくなります。

出典

2016-08-25 12:20:14

あなたのコードを使って素早く遊んで、<div class="navbar navbar-default navbar-fixed-top">の底にそれらを配置しました。これは基本的にそれらをあなたのnavbarに追加し、ちょうどその下に修正します。

質問の2番目の部分に答えて私はわかりません。私は少し助けてくれることを願っています。

<body> 
 
    <div class="container-fluid"> 
 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#"><img alt="" src="images/logo.png"></a> 
 
     </div> 
 
     </div> 
 
     <div class="container-fluid mainheader"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-9"> 
 
      <p>Mainheader</p> 
 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
 
      <form class="inline" role="search"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" data-provide="typeahead" placeholder="Search" id="Search"> 
 
       <div class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
       </div> 
 
       </div> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container-fluid namecard"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
      <p>Namecard</p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 

 
    A 
 
    <br>B 
 
    <br>C 
 
    <br>D 
 
    <br>E 
 
    <br>F 
 
    <br>G 
 
    <br>H 
 
    <br>I 
 
    <br>J 
 
    <br>K 
 
    <br>L 
 
    <br>M 
 
    <br>N

出典

2016-08-25 12:25:55 Imran

ブートストラップ/ CSS固定ヘッダは、ここで

答えて

関連する問題