向下滾動一定數量的像素后如何顯示隱藏的圖像？

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