javascript - 仅为次要停止主要幻灯片动画

Question

我已经设法获得我想要的导航外观和感觉，我的问题是当我不希望导航在您刷新时在第一个状态向上滑动时，您可以真正快速地看到第一个导航幻灯片我想要它与网站一起上升，然后带有背景的导航滑入，然后在滚动时向上滑动，但是没有背景的导航我根本不想滑动。

Example

(function($) {
  var header = $('.siteHeader');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      header.addClass('fixed active').off('transitionend');		
    } else if (header.hasClass('active')) {
      header.removeClass('active').one('transitionend', function() {
        header.removeClass('fixed');
		  header.addClass('active');
      });
    }
  }).scroll();

})(jQuery);

$(window).resize(function() {	  
    $('.siteHeader').addClass('active');
	$('.siteHeader').removeClass('fixed');
});

$(document).ready(function(){
    $(this).scrollTop(0);   
    $('.siteHeader').addClass('active');
});

.headerNav {
	height: auto;	
	float: right;
	margin: 0px;
}
.headerNav ul li {
	display: inline-block;
	margin-left: 40px;
}

.siteHeader {
	height: 86px;
	position: absolute;
	width: 100%;
	z-index: 11;
	background-color: red;
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s;
	-moz-transform: translateY(-86px);
	-ms-transform: translateY(-86px);
	-webkit-transform: translateY(-86px);
	transform: translateY(-86px);
}

.siteHeader.fixed {
	width: 100%;
	height: 66px;
	position: fixed;
	top: 0px;
	background-color: #000;
	-moz-transform: translateY(-130px);
	-ms-transform: translateY(-130px);
	-webkit-transform: translateY(-130px);
	transform: translateY(-130px);
	transition: transform .3s;
}

.siteHeader.active {
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	transition: transform .3s;
}

.siteHeader.fixed.active {
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	transition: transform .3s;
}

.main{
background-color: grey;
height: 1500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div class="siteHeader">
		  <nav class="headerNav">
			<ul>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
				<li><a href="">Link</a></li>
			</ul>  	
		</nav>  
	</div>
  
  <div class="main">Content</div>

Answer 1

我认为这可能是一个开始......

查看示例网站的源代码，有 2 个元素，都包含“标题”。我在 this jsfiddle 中复制了这个想法.

(function($) {
  var header = $('.siteHeader');

  $(window).scroll(function() {
    if ($("body").scrollTop() > 86) {
      header.addClass('fixed active').off('transitionend');
    } else if (header.hasClass('active')) {
      header.removeClass('active').one('transitionend', function() {
        header.removeClass('fixed');
        header.addClass('active');
      });
    }
  }).scroll();

})(jQuery);

$(window).resize(function() {
  $('.siteHeader').addClass('active');
  $('.siteHeader').removeClass('fixed');
});

$(document).ready(function() {
  $(this).scrollTop(0);
  $('.siteHeader').addClass('active');
});

body {
  padding: 0;
  margin: 0;
}

.headerNav {
  height: auto;
  float: right;
  margin: 0px;
}

.headerNav ul li {
  display: inline-block;
  margin-left: 40px;
}

.siteHeader,
.siteHeaderNoFloat {
  height: 86px;
  top: 0;
  width: 100%;
  background-color: red;
}

.siteHeader {
  position: absolute;
  z-index: 11;
  -moz-transform: translateY(-86px);
  -ms-transform: translateY(-86px);
  -webkit-transform: translateY(-86px);
  transform: translateY(-86px);
}

.siteHeader.fixed {
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  width: 100%;
  height: 66px;
  position: fixed;
  top: 0px;
  background-color: #000;
  -moz-transform: translateY(-130px);
  -ms-transform: translateY(-130px);
  -webkit-transform: translateY(-130px);
  transform: translateY(-130px);
  transition: transform .3s;
}


/*.siteHeader.active {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition: transform .3s;
}*/

.siteHeader.fixed.active {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition: transform .3s;
}

.main {
  background-color: grey;
  height: 1500px;
  padding-top: 86px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="siteHeaderNoFloat">
  <nav class="headerNav">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </nav>
</div>

<div class="siteHeader">
  <nav class="headerNav">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  Content
</div>

当body的.scrollTop达到86px，header的高度，黑色的固定header出现。

希望这会有所帮助。祝你好运!