Sticky header on immediate scroll

jQuery(document).ready(function(){
var DesktopBreakpoint = 1199;

function sticky_header_activate() {
if (!jQuery('.sticky-height').hasClass('active')) {
jQuery('.sticky-height').addClass('active').height(108);
jQuery('#header').addClass('affix').slideDown();
jQuery('.logo img').animate({
"width": "165px"
}, 150);
}
}

function sticky_header_deactivate() {
if (jQuery('.sticky-height').hasClass('active')) {
jQuery('.sticky-height').height(0).removeClass('active');
jQuery('#header').removeClass('affix');
if (jQuery(window).width() > DesktopBreakpoint) {
jQuery('.logo img').animate({
"width": "247px"
}, 250);
}
}
}

function sticky_header_mobile() {
jQuery('.sticky-height').height(108).removeClass('active');
jQuery('#header').removeClass('sticky');
}

function sticky_header_on_scroll() {
jQuery(window).scroll(function() {
var where_scroll = jQuery(window).scrollTop();
if (jQuery(window).width() > DesktopBreakpoint) {
if (where_scroll > 1) {
sticky_header_activate();
} else {
sticky_header_deactivate();
}
} else {
sticky_header_mobile();
}
});
}

function sticky_header() {
if(jQuery(window).width() > DesktopBreakpoint) {
var where_scroll = jQuery(window).scrollTop();
if (where_scroll > 1) {
sticky_header_activate();
sticky_header_on_scroll()
} else {
sticky_header_deactivate();
sticky_header_on_scroll();
}
} else {
sticky_header_mobile();
}
}

// Initialize sticky header
sticky_header();

jQuery(window).resize(function() {
sticky_header();
});
});

test

How to write IE Only styles ?

It’s a hack!

As with all CSS hacks this technique works by exploiting errors in a browsers style sheet parser. We’ll be using a combination of strategically placed \0, \, and \9 character escapes which IE will happily accept as valid syntax causing it to parse the @media block and apply any style rules defined inside it. Other browsers correctly identify the syntax error and discard the @media block along with its contents.

The @media rule hacks

To target IE 6 and 7

@media screen\9 {
    body { background: red; }
} 

To target IE 6, 7 and 8

@media \0screen\,screen\9 {
    body { background: green; }
} 

To target IE 8

@media \0screen {
    body { background: blue; }
} 

To target IE 8, 9 and 10

@media screen\0 {
    body { background: orange; }
} 

To target IE 9 and 10

@media screen and (min-width:0\0) {
    body { background: yellow; }
} 

Using the hack

This says it all really:

body {
  background: pink;
}

/* IE 6 and 7 fallback styles */
@media all\9 {
    body {
        background: red;
    }
    h1 {
        color: yellow;
    }
}

/* IE 6 and 7 fallback print styles */
@media print\9 {
    body {
        color: blue;
    }
    h1 {
        color: red;
    }
}
 

Note that the @media type can be any of the supported types, so rules in @media screen\9 will target screens and @media print\9 will only apply to print style sheets.

nth-child selector for ie8 ( jQuery)

1)add jquery latest version in your code

2)add this snippet, replace tr with your required element

<script type="text/javascript">
$( document ).ready(function() {
$('tr:nth-child(odd)').addClass('oddTr');
$('tr:nth-child(even)').addClass('evenTr');
});
</script>

3) create class in css 

Current page highlighting for Navbar menu - CODE

CSS 

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
 color: #fff;
 background: #930;
}