Запустить поведение $ (window) .scroll вниз для меньших разрешений

Question

Я использую $(window).scroll для всплывающего небольшого фиксированного, похожего на нижний колонтитул наложения в нижней части экрана, когда пользователь немного прокручивает, например:

$(window).scroll(function() {
if ($(this).scrollTop() < 10){
    $("#giveaway-wrapper").css({"opacity": "0" , "position": "fixed", "bottom": "-1000px"});
}
if ($(this).scrollTop() > 11){
    $("#giveaway-wrapper").css({"opacity": "1" , "position": "fixed", "bottom": "0"});
}
if ($(this).scrollTop() > 2000){
    $("#giveaway-wrapper").css({"opacity": "1" , "position": "fixed", "bottom": "-1000px"});
}
});

Это будет вставьте оверлей, когда пользователь немного прокручивает страницу, и когда он достигает нижней части страницы, снова выдвиньте его.

Это прекрасно работает, когда экран имеет большее разрешение, но при меньшем разрешении, когда реагирует запускается и меняется макет, оверлей покрывает некоторые вещи, которые я не хочу покрывать. Можно ли сделать так, чтобы ширина окна монитора скриптов и меньшая ширина вызывали наложение дальше вниз? Например, при ширине 900 или меньше мы переключаемся на -

$(window).scroll(function() {
if ($(this).scrollTop() < 300){
    $("#giveaway-wrapper").css({"opacity": "0" , "position": "fixed", "bottom": "-1000px"});
}
if ($(this).scrollTop() > 301){
    $("#giveaway-wrapper").css({"opacity": "1" , "position": "fixed", "bottom": "0"});
}
if ($(this).scrollTop() > 2000){
    $("#giveaway-wrapper").css({"opacity": "1" , "position": "fixed", "bottom": "-1000px"});
}
});

- что приведет к тому, что оверлей будет скользить дальше вниз при этом разрешении и ниже.

HTML в соответствии с:

<div id="giveaway-wrapper">
        <img src="images/giveaway.png">
        <div id="giveaway-background">
            <div id="giveaway" class="content">
                <h3>...lorem ipsum...</h3>
            </div>
        </div>      
</div>