0

您好，我正在构建一个类似于此http://engageinteractive.co.uk/的顶部导航系统 （当在主图片下滚动时，透明导航栏会变成纯色透明色）。在我的设计中，我给导航栏一个固定的位置并应用了以下代码

$(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() 属性获得的固定值转换为相对大小。如果有人可以帮助我，我将不胜感激

4

1 回答 1

1

您需要阅读主图像的位置，然后对此进行评估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');
    }
});

显然替换了main_img分配的相关选择器。

于 2013-01-25T17:22:45.810 回答