如何防止在固定到顶部的导航栏过渡中发生捕捉？

Question

我已经设法设计了一个导航栏。然后，在用户滚动一定量到页面后，我使用 jQuery 将其固定到顶部。运行看看效果吧。我有一些问题。见下文。

$(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);
 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;
 border-radius: 0 0 10px 10px;
  top: 0;
 background-color: rgb(76, 85, 92) !important;
 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>

当导航栏粘在顶部时，您可能会看到第一个 <p> 的一半内容在捕捉过程中几乎被覆盖。

这是意外行为。我想摆脱这个。流程要顺畅，否则会影响用户体验。

Answer 1

将导航栏固定在顶部后立即使用 padding-top。

将此条件添加到您的 JS 代码中：

if (windowpos >= pos.top) {
  s.addClass("stick");
  $('.container').css('padding-top', '90px'); /* Give padding when it sticks to top */
} else {
  s.removeClass("stick"); 
  $('.container').css('padding-top', '0'); /* Remove padding when it again comes back to place */
}

因为一旦 navbar 粘在顶部，它原来的位置就会变成 0（在它需要一些 space 之前。导航栏-高度 = 48px + 42px [大约]）。所以现在内容向上移动到大约 90px。所以如果我们给 padding-top: 90px 到 .container 它会调整它的 space 并向下移动 90px。它就像导航栏仍然向上 .container.

看看下面的片段：

$(document).ready(function() {
    var s = $(".nav");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
            $('.container').css('padding-top', '90px');
        } else {
            s.removeClass("stick"); 
            $('.container').css('padding-top', '0');
        }
    });
});

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);
 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;
 border-radius: 0 0 10px 10px;
  top: 0;
 background-color: rgb(76, 85, 92) !important;
 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>

希望对您有所帮助！

Answer 2

$(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;
}
nav {
min-height: 50px;
 }

.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);
 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;
 border-radius: 0 0 10px 10px;
  top: 0;
 background-color: rgb(76, 85, 92) !important;
 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>

如何防止在固定到顶部的导航栏过渡中发生捕捉？

How to prevent snapping in regular to fix-to-top navbar transition?

html

css

jquery

user-experience