Jquery – Fade in/Fade out, Fixed/Sticky Header

cssfadeinfadeoutfadetojquery

Okay, I know it seems like I've asked this question already, for which @adeneo had previously answered and apreciated, however I am rattling my brains because I just can't get this to work.

I'm trying to make my 'fixed' positioned header 'fadeTo' 0.5 Opacity when scrolled down and fade back to full opaqueness ('opacity': 1.0) when the user scrolls back to the top?

Here's what I have:

$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {
$("#header").fadeTo(400, 1);
}else{
$("#header").fadeTo(400, 0.5);

}
});

At the moment, using this code only seems to make it 'fadeTo' 0.5 opacity when scrolled down but it then won't fade back to full opaqueness (opacity: 1.0) when scrolled back to the top.

Please help!

Best Answer

One of the problems is that you're executing an animation of 400ms for every time your user scrolls the page, this generates a very long queue of effects which have no visible effect, e.g. animating to 1 opacity for each time the scroll event fires with scrollTop > 50, adding a very long queue of invisible effects until the fading out effect takes place.

A simple way to remedy that is using .stop(true) before executing the fadeTo, this way the element effects queue will be always cleared before executing the given animation.

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
        $("#header").stop(true).fadeTo(400, 0.5);
    } else {
        $("#header").stop(true).fadeTo(400, 1);
    }
});

Fiddle

But even so you will still be executing animations unnecessarily, so I'd recommend using .data to store the faded state and only animate when necessary:

$(window).on('scroll', function() {
    var header = $("#header");
    if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(400, 0.5);
    } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(400, 1);
    }
});

Fiddle

ps. I've inverted your opacity values as your question's code's logic didn't correspond to your desired behavior.

Related Solutions

Javascript – jQuery – Sticky header that shrinks when scrolling down

This should be what you are looking for using jQuery.

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

Demonstration: http://jsfiddle.net/jezzipin/JJ8Jc/

Javascript – Why does the JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Best Answer

Related Solutions

Javascript – jQuery – Sticky header that shrinks when scrolling down

Javascript – Why does the JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not

Related Topic