如何防止捕捉定期到固定到頂部的導航欄過渡？

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>