修復了導航欄淡入/淡出問題

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