Jquery 响应性设计的scrollTop（）值

您好，我正在构建一个类似于此的顶级导航系统 （在主图片下方滚动时，透明导航栏将显示一种纯色透明颜色）。 在我的设计中，我给了导航栏一个固定的位置，并应用了以下代码

$(window).scroll(function() {
    var top_val = $(window).scrollTop();
    if(top_val > 600) {
        $("#main_nav_container").removeClass('transparent_0');
        $("#main_nav_container").addClass('transparent_1');
    }
});

---

这对我来说很好，在通过主站点图像（测试为600）后，导航容器更改其显示。问题是，我还需要调整这一点，以适应快速响应的设计。我的主顶部图像根据浏览器大小更改其大小，因此我需要以某种方式将从scrollTop（）属性获得的固定值转换为相对大小。如果有人能帮我解决这个问题，我将不胜感激。您需要阅读主图像的位置，然后根据该位置评估

scrollTop（）

。也许是这样的：

    var main_img = $('img.main_img'),
scroll_change_at = main_img.offset().top + main_img.height();

$(window).scroll(function() {
    var top_val = $(this).scrollTop();

    if(top_val > scroll_change_at) 
    {
        $("#main_nav_container").removeClass('transparent_0');
        $("#main_nav_container").addClass('transparent_1');
    }
});

显然，要更换

主\u img

分配的相关选择器