向下滚动一定数量的像素后如何显示隐藏的图像？

Question

我已经开始尝试使用javascript / jquery并遇到了我的第一个障碍。 一切正常，但是那样。 我有一个导航栏，当您向下滚动到该导航栏时，它固定在页面顶部，并且其中具有隐藏的图像。 我试图使它可见，并在导航栏到达顶部时淡入，并在您向上滚动时淡出。 我尝试使用几种解决方案，但似乎没有任何效果。 我很确定问题是我写这篇文章失败了，所以有人可以发光吗？

CSS：

#navimg { 
    padding: 0px 0px 0px 0px; 
    margin: 0px;
    height: 45px;
    visibility: hidden; 
}

使用Javascript：

$(function() {
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; 
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); 

            if (scroll_top > sticky_navigation_offset_top) { 
                $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
            } else {
                $('#sticky_navigation').css({ 'position': 'relative' }); 
            }   
    };

    sticky_navigation(); 
    $(window).scroll(function() { // 
         sticky_navigation();
    });
});


$(window).scroll(function(){
    if($(window).scrollTop()<200){
        $('#navimg').css({ 'visibility': 'visible' }); 
    } else {
        $('#navimg').css({ 'visibility': 'hidden' });
    } 
});

Answer 1

向下滚动（导航栏固定在顶部）时我该怎么做，我切换了CSS类：

$(window).scroll(function () {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});