如何防止捕捉定期到固定到顶部的导航栏过渡？

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); 
 
\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>

当地步导航栏是坚持到顶部，你也许可以看到的第一个<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（它正在采取对前一些空间之前。 navbar-height = 48px + 42px [approx。]）。所以现在内容向上移动到大约90px。因此，如果我们给出padding-top: 90px到.container它调整它的空间并向下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); 
 
\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>

希望这有助于！

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); 
 
\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>