Question

Hello Iam构建一个与此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（）属性获得的固定值转换为相对大小。如果有人可以帮助我，我将不胜感激

Answer 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作业的相关选择器。

用于响应式设计的scrollTop（）值

1 个答案: