ナビゲーションバーをスクロールして、固定ヘッダーの下に固定したままにします。問題

私のコードに関する問題を解決する手助けは誰にでもありますか？私はこれに新しいし、いくつかの問題がある。ナビゲーションバーをスクロールして、固定ヘッダーの下に固定したままにします。問題

私の初期コードにいくつかの問題があります。私が必要とすることをしない。どんな助けもありがとう！

私はこれを必要とする：スクロールを停止し、固定ヘッダの下部に固定になるためにピンクのメニューバー。コールのアクションは、固定ヘッダーの下にスクロールアップする必要があります。現在、固定ヘッダーの下に一番上までスクロールせず、正しい位置にバウンスします。また、固定された後にページに残っているメインコンテンツの上部を隠すべきではありません。スクロールする前にページに着いたときのような初期のパディングがあるはずです。

* {margin: 0; padding: 0;} 
 

 
a {text-decoration: none;} 
 

 
/* This class is added on scroll */ 
 
.fixed { 
 
\t position: fixed; 
 
\t top: 182px; 
 
\t height: 70px; 
 
\t z-index: 1; 
 
} 
 

 
body { 
 
\t color: #fff; 
 
\t font-family: Gill Sans, Verdana; 
 
\t font-size: 18px; 
 
\t text-align: center; 
 
} 
 

 
header { 
 
background: blue; 
 
position: fixed; 
 
color: black; 
 
height: 182px; 
 
position: fixed; 
 
top: 0; 
 
width: 100% \t ; 
 
z-index: 1; 
 
} 
 

 
#action-call { 
 
\t color: black; 
 
\t height: 200px; 
 
\t padding-top: 200px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
/* Navigation Settings */ 
 
nav { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t background: pink; 
 
} 
 

 
nav li { 
 
\t display: inline-block; 
 
\t padding: 24px 10px; 
 
} 
 

 
nav li a { 
 
\t color: #757575; 
 
\t text-transform: uppercase; 
 
} 
 

 
#main-content { 
 
\t color: black; 
 
\t height: auto; 
 
\t padding-top: 18px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
footer { 
 
\t color: black; 
 
\t height: 100px; 
 
\t padding-top: 18px; 
 
\t position: relative; 
 
\t width: 100%; \t 
 
}

<html lang="en-US"> 
 
<head> 
 

 
\t <!-- Meta tags & title /--> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
\t <meta name="robots" content="all,index,follow" /> 
 

 
\t <title>Scroll To Top Then Fixed Navigation Effect With JQuery and CSS</title> 
 
\t <meta name="description" content="Create a sticky navigation bar that remains fixed to the top after scroll" /> 
 
\t 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Main stylesheet /--> 
 

 
</head> 
 

 
<body> 
 
\t <header> 
 
\t <h1>FIXED HEADER</h1> 
 
\t \t A fixed header with my logo & stuff 
 
\t </header> 
 

 
<section id="action-call"> 
 
\t <h1>CALL TO ACTION</h1> 
 
\t <p>This is a call to action and it will have some text, a big button and a huge image here!</p> \t 
 
</section> \t 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function(){ 
 
\t $(window).bind('scroll', function() { 
 
\t var navHeight = $(window).height() - 70; 
 
\t \t \t if ($(window).scrollTop() > navHeight) { 
 
\t \t \t \t $('nav').addClass('fixed'); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t $('nav').removeClass('fixed'); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
</script> 
 

 
<nav> 
 
\t <ul> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">About</a></li> 
 
\t \t <li><a href="#">Services</a></li> 
 
\t \t <li><a href="#">Team</a></li> 
 
\t \t <li><a href="#">Contact</a></li> 
 
\t </ul> 
 
</nav> 
 

 
<section id="main-content"> 
 
\t <h1>MAIN CONTENT</h1> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> 
 
\t <p>This is the main content section and there will be tons of text here and various posts and images etc.</p> \t 
 
</section> 
 

 
<footer> 
 
\t <h1>FOOTER</h1> 
 
\t <p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p> 
 
\t <p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p> 
 
\t <p>This is the footer area and not much will be in here. Just somne copyright and credit stuff</p> 
 
</footer> 
 

 
</body> 
 
</html>

私はここでの問題を抱えていたコードを参照してください。

$(document).ready(function() { 
    $(window).scroll(function() { 
     var a = $(this).scrollTop(); 
     if (a >= 400) { 
      // Window Scroll 400px from top 
      // Something 
     } else { 
      // Something 
     } 
    }); 
});

出典

2017-02-08 Basic Blue

あなたは後にパディングトップを追加する必要があります。 http://codepen.io/BasicBlue/pen/KaxYNG

出典

2017-02-08 19:21:36

これは本当にすばらしい修正であり、このスクリプトを使用するほうがはるかに優れています。スクロールがナビバーに近づくと、ジャンプするように見えます。それはかなり急激で滑らかではないようです。任意のアイデアをどのようにいくつかそれを円滑にするには？ありがとう –

Oups ...私はそれを修正しました。私の編集されたポストを参照してください;） –

単に素晴らしいです。パーフェクトです。それは私のアイデアの目標です。とてもプロフェッショナルでスムーズです。ありがとう+1 –

は、このコードを試してみてくださいあなたはあなたの固定位置を適用します。私はそれであなたのnevHeight計算を変更するためにあなたに提案する：

var padding_apply = false; 
var nav_init_pos = 0; 

function set_nav_pos() { 
    nav_init_pos = $('#action-call').innerHeight() - $('header').innerHeight(); 
} 

$(document).ready(function(){ 
    set_nav_pos(); // initialize scroll triggering position 
    $(window).on('resize', function() { 
    set_nav_pos(); // re-initialize the position if your header block height change with the resize action 
    $(window).trigger('scroll'); // We force update the body padding with the scroll event callback. 

    }); 
    $(window).on('scroll', function() { 
     if ($(window).scrollTop() > nav_init_pos) { 
      if(!padding_apply) { 
       $('nav').addClass('fixed'); 
       $('body').css('padding-top', $('nav').innerHeight()); 
       padding_apply = true; 
      } 
     } 
     else { 
      if(padding_apply) { 
       $('nav').removeClass('fixed'); 
       $('body').css('padding-top', 0); 
       padding_apply = false; 
      } 
     } 
    }); 
});

あなたの窓はパディングが新しいビューポートのサイズに適合される、サイズを変更している場合は、私の解決策の利点があります。

私の答えがあなたに合っていれば幸いです。

EDIT：スクロールトリガ位置を修正してプロセスを最適化するために新しいものを追加しました。私もresizeイベントコールバックを追加しました。

出典

2017-02-08 18:48:52

それを機能させる。 –

は、あなたは、2つの高さを追加する必要が200pxの+ 182px

$(document).ready(function(){ 
     $(window).bind('scroll', function() { 
     var navHeight = $(window).height() - 482; 
      if ($(window).scrollTop() > navHeight) { 
       $('nav').addClass('fixed'); 
      }else{ 
       $('nav').removeClass('fixed'); 
      } 
     }); 
    });

デモ：私は私はあなたが提案しているが、私は、私はオフコードを完了するために十分に良い思いを確認していないかを理解だと思うhttp://codesheet.org/cs/iKWtywj0

出典

2017-02-08 23:13:27

このメニューは固定されていません。他のコンテンツと一緒にスクロールします。私はそれを固定ヘッダの下に張りたい。ありがとう –

ナビゲーションバーをスクロールして、固定ヘッダーの下に固定したままにします。問題

答えて

関連する問題