0
私のコードに関する問題を解決する手助けは誰にでもありますか？私はこれに新しいし、いくつかの問題がある。ナビゲーションバーをスクロールして、固定ヘッダーの下に固定したままにします。問題
私の初期コードにいくつかの問題があります。私が必要とすることをしない。どんな助けもありがとう！
私はこれを必要とする：スクロールを停止し、固定ヘッダの下部に固定になるために ピンクのメニューバー。コールのアクションは、固定ヘッダーの下にスクロールアップする必要があります。現在、固定ヘッダーの下に一番上までスクロールせず、正しい位置にバウンスします。 また、固定された後にページに残っているメインコンテンツの上部を隠すべきではありません。スクロールする前にページに着いたときのような初期のパディングがあるはずです。
* {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
}
});
});
これは本当にすばらしい修正であり、このスクリプトを使用するほうがはるかに優れています。スクロールがナビバーに近づくと、ジャンプするように見えます。それはかなり急激で滑らかではないようです。任意のアイデアをどのようにいくつかそれを円滑にするには？ありがとう –
Oups ...私はそれを修正しました。私の編集されたポストを参照してください;） –
単に素晴らしいです。パーフェクトです。それは私のアイデアの目標です。とてもプロフェッショナルでスムーズです。ありがとう+1 –