Fixed Navigation Bar fade-in/out issues

Question

I've been struggling for a few hours now trying all kind of things to get this working, but I've failed thus far to get it to work the way I want it to work.

Basically what I want to accomplish is to have the fixedbar to fade if the scroll position is more than the position of the phonebox element and have it fade out if the position is less than the phonebox element's position.

I used ScrollTop to enter the amount of pixels from the top at which the fade in and fadeout should happen at, but that only seems to work for my own screen (my macbook for example has a different height and therefore messes up the location where the bar fades in and out).

I was hoping to get some help on how to make the javascript use the location of the phonebox element instead of a fixed amount of pixels.

Thanks in advance!

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

Had help from a online gaming community friend, took about 2 hours but we figured it out. Below is the script that did the trick for me if anyone else runs into the same problem. :)

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