I was looking at the code on this SO question and thought it would be useful in toggling a div's visibility, like a navbar, dependent upon another element on the page being visible on screen or not. Here is the code I used from the page:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((docViewTop < elTop) && (docViewBottom > elBottom));
}
I tried constructing a function to do this, but unfortunately I suck at programming. Here is what I used:
$('#magicnav').hide();
var intro = $('#intro');
$(document).ready(function () {
if (intro.isScrolledIntoView()) {
$('#magicnav').fadeOut();
} else {
$('#magicnav').fadeIn();
}
});
I tried the statement if(isScrolledIntoView($intro))
as well, but obviously that's incorrect as well. Can anyone help me out?
Here is a jsfiddle of the page for reference. My goal is to have a fixed navbar at the top of the screen that only shows when a specific div (also containing nav links) is NOT on screen.
You may notice that I have stuck the 'magicnav' div in the middle of the page. This was on purpose, as I wanted to keep it from being fixed to the top at present and needed to ensure that I could quickly see whether or not my jQuery was working.