0
私はnavbarを設計することができました。その後、ユーザーが一定量のページをスクロールした後、jQueryを使用して上部に修正した後。それを実行して効果を確認します。私はそれにいくつかの問題があります。下記参照。 ノーマルからフィートトップへのスナップを防ぐ方法を教えてください。
ナビゲーションバーがトップにこだわっているポイントは、あなたが最初<p>の半分のコンテンツを見ることができるかもしれない
$(document).ready(function() {
var s = $(".nav");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});body {
background: white;
font-family: Lato, sans-serif;
line-height: 16px;
}
.container {
background: #e2e2e2;
width: 520px;
height: 1500px;
margin: 0 auto;
padding: .5rem;
}
.logo-content p {
line-height: 7rem;
}
.logo {
padding: 5px;
left: 0;
}
.nav {
right: 0;
left: 0;
z-index: 2;
list-style: none;
margin: 0.25rem 0 2rem;
background-color: rgba(76, 85, 92, 0.7);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-end;
border-radius: 10px;
-webkit-box-shadow: 7px 12px 50px 0 rgba(0, 0, 0, 0.89);
-moz-box-shadow: 7px 12px 50px 0 rgba(0, 0, 0, 0.89);
box-shadow: 7px 12px 50px 0 rgba(0, 0, 0, 0.89);
\t transition: .3s all ease;
}
.nav a {
text-decoration: none;
display: block;
padding: 1rem 1rem calc(1rem - 5px);
border-bottom: 5px solid transparent;
color: white;
transition: all .3s ease-in-out;
}
.nav a:hover {
background-color: rgba(0, 146, 196, .2);
border-bottom: 5px solid rgb(0, 183, 245);
}
.sub-menu a {
padding-left: .5rem;
padding-right: .5rem;
}
.sub-menu i {
padding-right: .5rem;
}
.sub-menu-parent {
position: relative;
}
.sub-menu {
list-style: none;
padding: 0;
visiblity: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all .3s ease-in-out 0, visibility 0 linear .3s, z-index 0 linear .01s;
background: #4c555c;
}
.sub-menu-parent:hover .sub-menu {
visiblity: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
.stick {
position: fixed;
\t border-radius: 0 0 10px 10px;
top: 0;
\t background-color: rgb(76, 85, 92) !important;
\t margin: 0 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="logo-content">
<p> Blank Space </p>
</div>
<nav>
<ul class="nav">
<li><a href="/">Home</a></li>
<li class="sub-menu-parent">
<a href="/tutorial">Videos</a>
<ul class="sub-menu">
<li><a href="#"> <i class="fa fa-file-text"></i>Tutorials </a></li>
<li><a href="#"> <i class="fa fa-support"></i>Quick Tips </a></li>
<li><a href="#"> <i class="fa fa-film"></i>Films </a></li>
<li><a href="#"> <i class="fa fa-video-camera"></i>Music Videos </a></li>
<li><a href="#"> <i class="fa fa-gift"></i>Extras </a></li>
</ul>
</li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/blog/contact/">Contact</a></li>
</ul>
</nav>
<!--img class="logo" src="http://i.imgur.com/L9xPDrp.png" width="30px" height="30px"-->
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi officia sit corrupti magnam? Ullam animi tempore enim soluta. Velit temporibus, voluptate voluptas itaque ab a quos dolore corporis cumque fuga. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere alias labore, corrupti dolore eveniet. Ullam veniam in inventore quo, voluptas nihil similique, ab excepturi ad autem blanditiis assumenda tenetur, tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias earum quos nulla perferendis, voluptate animi libero, soluta officia ipsa voluptatibus vel. Maxime tempora placeat autem, nostrum sequi molestiae delectus nulla.</p>
<p>Nam asperiores illo repudiandae voluptatum nostrum. Sapiente ad ipsa quod nulla repellat quo doloremque dignissimos inventore voluptas, deleniti aliquam cum magni repudiandae vitae, a corporis quam voluptates nemo vel. Ipsum!</p>
<p>Ad, nulla modi ipsum. Similique error pariatur, quis facere fugit aliquid incidunt repellendus voluptate harum earum velit a non voluptatum id suscipit, maxime dicta quas tenetur rem ipsam consequuntur corrupti?</p>
</div>
</div>これは予期しない動作です。私はこれを取り除きたい。フローは滑らかでなければなりません。
あなたは少し説明することはできますか？値90pxはどこから来たのですか？ –
@SantoshKumar 'navbar'が上にスティックすると、先にあった元の場所は' navbar-height = 48px + 42px（約）のためにスペースを取る前に '0 'になります。これで内容は約90ピクセルに上方にシフトします。したがって、 '.container'に' padding-top：90px'を指定すると、スペースを調整し、下方に90pxになります。そのnavbarのようにまだそこには '.container'があります。あなたがこれを理解することを願って。 –
このコメントは回答の一部である必要があります。 –