Question

Hello Iam building a top navigation system similar to this http://engageinteractive.co.uk/
(when scrolling under the main picture the transparent navigation bar gets a solid transparent color).
in my design I gave to the navigation bar a fixed position and applied the following code

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

This is working good for me and after passing the main site image (which is tested to be at value 600) the navigation container changes its display. the problem is that I also need to adjust this for a responsive design. my main top image changes its size according to the browser size, so I need in some way transform the fixed value that I got from the scrollTop() property to a relative size. I will appreciate if someone can help me with this

Answer 1

You’ll need to read in the position of the main image, and then evaluate scrollTop() against that. Something like this, perhaps:

    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');
    }
});

Obviously replacing the relevant selectors for the main_img assignment.