固定ナビゲーションバーのフェードイン/アウトの問題

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

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

<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() { 
 
\t var header = $('#header'); 
 
\t var offset = $('#header').position().top + $('#header').outerHeight(true); 
 
\t var scrolltop = $(this).scrollTop(); 
 
\t 
 
    if(scrolltop >= offset) { 
 
     $('#fixedbar1').fadeIn(250); 
 
    } 
 
    else if(scrolltop <= offset) { 
 
     $('#fixedbar1').fadeOut(250); 
 
    } 
 
    }); 
 
});