Sticky Header for Desktop Width Only

Problem

I'm not sure if it's called sticky header but This may be a easy question for you guys! I do have a sticky header.. JSFIDDLE here

JS CODE:

jQuery(function($) {
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) {
    $("#header").css({position: 'fixed'});
}
else {
    $("#header").css({position: 'inherit'});
}
})
});

CSS:

#header { background: #000; color: #fff; padding: 20px; margin: 0; }
#test { height: 2000px; }

Main Question: I want this script to run on screen 780 above only. I don't want it in my tablet and mobile versions.. Help

Optional: Can you suggest/improvised my code by doing a jsfiddle? Something like adding a cool effect, transitions etc..

Thanks in advance!

EDIT ** I'm not sure if this be will a different question..

I have updated my codes and replaced this

if ($(this).scrollTop() > 100) {

into

if ($(this).scrollTop() > 100 && $(this).width() > 780) {

In a way,it works.. but it doesnt return the properties of the css for smaller versions.. To explain it well, here's the UPDATED jsfiddle.

  1. For 780 Above when you scroll down the header becomes RED and when you scroll up it becomes black again ( just like i wanted)

  2. If you re-size your window below 780 the header should be gray. and if scrolled down and up again.( position should be inherit not fixed). color still it should be grey

im my jsfiddle case, it becomes black..

Problem courtesy of: Jeremi Liwanag

Solution

I would just add a CSS class, and use a media query on that class to determine whether or not it should be fixed. See Fiddle.

jQuery(function($) {
    $(window).on("scroll", function () {
        if ($(this).scrollTop() > 100) {
            $("#header").addClass("stickyHeader");
        }
        else {
            $("#header").removeClass("stickyHeader");
        }
    })
});

CSS:

@media (min-width: 780px) {
    .stickyHeader { position: fixed; }
}
Solution courtesy of: dc-

Discussion

You can get the height of the window with jquery

if($(window).width() >= 780){
  alert("bigger")
}
Discussion courtesy of: Vaughan

CSS media queries doesn't help you?, you can do something like:

#header { 
    position: fixed;
    background: #000; 
    color: #fff; 
    padding: 20px; 
    margin: 0;
    transition: left 0.5s;
}

#test { 
    height: 2000px; 
}

@media all and (max-width: 780px){
    #header {
        position:inherit;
    }
}

you can see it on you gist HERE

Discussion courtesy of: rodacato

This recipe can be found in it's original form on Stack Over Flow.