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

时间：2016-11-14 17:18:36

标签： jquery html css user-experience

我设法设计一个导航栏。之后，我使用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>的一半内容在快照期间几乎被覆盖。

这是意外行为。我想摆脱这个。流量应该是平滑的，否则会影响用户体验。

2 个答案:

答案 0 :(得分：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 [大约]）。所以现在内容向上移动到大约90px。因此，如果我们将padding-top: 90px提供给.container，则会调整其空间并向下调整90px。就像导航栏仍然向上.container。

请看下面的代码段：

＆＃13;
＆＃13; 
$(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');
        }
    });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 1 :(得分：-1)

＆＃13;
＆＃13; 
$(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"); 
        }
    });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题