Question

我已经挣扎了好几个小时，现在尝试各种各样的事情来实现这个目标，但到目前为止我还没能按照我希望的方式工作。

基本上我想要实现的是，如果滚动位置超过电话盒元素的位置，则使固定条淡出，如果位置小于电话盒元素的位置，则使其淡出。 / p>

我使用ScrollTop输入淡入和淡出应该在顶部的像素数量，但这似乎只适用于我自己的屏幕（例如我的macbook有不同的高度因此会混淆酒吧淡入淡出的位置。

我希望得到一些关于如何使javascript使用phonebox元素的位置而不是固定数量的像素的帮助。

提前致谢！

＆＃13;

$(document).ready(function() {
  $('#navigation a, #fixedbar a').on('click', function(e) {
    e.preventDefault();
  });

  $(window).on('scroll', function() {
    var scrolltop = $(this).scrollTop();

    if (scrolltop >= 967) {
      $('#fixedbar').fadeIn(250);
    } else if (scrolltop <= 967) {
      $('#fixedbar').fadeOut(250);
    }
  });
});

＆＃13;

	#fixedbar {
	  display: none;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 80px;
	  background: rgba(0, 0, 0, 0.75);
	}
	
	#fixednav {
	  display: block;
	  width: 710px;
	  margin: 0 auto;
	  padding: 0px 25px;
	}
	
	#fixednav li a {
	  display: block;
	  float: left;
	  font-size: 1.75em;
	  font-weight: bold;
	  color: #96aed8;
	  line-height: 80px;
	  text-decoration: none;
	  padding: 0px 8px;
	  margin-right: 6px;
	  -webkit-transition: all 0.2s linear;
	  -moz-transition: all 0.2s linear;
	  transition: all 0.2s linear;
	}
	
	#fixednav li a:hover {
	  color: #fff;
	  background: rgba(0, 0, 0, 0.3);
	}

＆＃13;

<div id="fixedbar"></div>
<section id="header">
  <div class="inner">
    <a id="slide1" href="#"></a>
    <div id="slide2"></div>
    <h1>text</h1>
    <p>text</p>
    <ul class="actions">
      <li><a href="#three" class="button">text</a></li>
    </ul>
  </div>
</section>
<div class="phonebox"></div>

＆＃13;

Answer 1

得到在线游戏社区朋友的帮助，花了大约2个小时，但我们发现了。如果其他人遇到同样的问题，下面是为我做的技巧的脚本。：）

＆＃13;

 $(document).ready(function(){
   $('#navigation a, #fixedbar1 a').on('click', function(e) {
     e.preventDefault();
   });
   $(window).on('scroll',function() {
	 var header = $('#header');
	 var offset = $('#header').position().top + $('#header').outerHeight(true);
	 var scrolltop = $(this).scrollTop();
	 
     if(scrolltop >= offset) {
       $('#fixedbar1').fadeIn(250);
    }
     else if(scrolltop <= offset) {
       $('#fixedbar1').fadeOut(250);
     }
   });
 });

＆＃13;

固定导航栏淡入/淡出问题

1 个答案: