Code not working! :(
Hi,
I've only just started using JQuery, so it all seems pretty complicated still!
I'm building a website, mainly one long scrolling page. I have a header of 100% by 100%, that is in a fixed position over the top of everything else. As you start to scroll, I want it to disappear, to reveal the content underneath.
The bit of code that does work is this:
(window).scroll(function() {
if ($(this).scrollTop()>1)
{
$('#pippaheader').fadeOut();
}
else
{
$('#pippaheader').fadeIn();
}
});
But then this doesn't:
var ph = $('#pippaheader');
$(window).scroll(function() {
if ($(this).scrollTop()>1)
{
ph.fadeOut();
}
else
{
ph.fadeIn();
}
});
and this doesn't either:
$(window).ready(function() {
var $div1 = $('#pippaheader');
$(window).on('scroll', function() {
var st = $(window).scrollTop();
if (st > 100) {$div1.addClass('hide')} else {$div1.removeClass('hide')}
});
});
I'd rather use this last option as I've heard its the better way to do it, but I'm not sure why its not working. Its definitely loading jquery, and when I inspect the div it brings up <div id="pippaheader" class="hide"> so it is reading it? Also its not bringing up any errors.
Not sure if theres enough info there for anyone to try and help, but I'd appreciate it if anyone had any ideas!
Thanks,
Pippa