You can use jQuery’s .width() function to get the window width and build an if statement around your function like this:
$(window).scroll(function(){
//here we check the viewport width
if($(window).width() < "1024"){
//if the viewport width is less then 1024 scrolltop is 300
if ($(window).scrollTop() >= 300) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else{
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>