修复了导航栏淡入/淡出问题

Question

我一直在努力几个小时，尝试各种事情来使它工作，但是到目前为止，我一直未能使它按照我希望的方式工作。

基本上，我想完成的工作是，如果滚动位置大于phonebox元素的位置，则使固定栏消失，如果滚动位置大于phonebox元素的位置，则使固定栏消失。

我使用ScrollTop从顶部开始输入应该发生淡入和淡出的像素数量，但这似乎只对我自己的屏幕有效（例如，我的Macbook具有不同的高度，因此弄乱了条淡入和淡出）。

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

提前致谢！

 $(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); } }); }); 

  #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); } 

 <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> 

Answer 1

在一个在线游戏社区朋友的帮助下，大约花了2个小时，但我们弄清楚了。 如果有人遇到相同的问题，下面的脚本可以帮我解决问题。 :)

  $(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); } }); });