當用戶向下滾動頁面時顯示隱藏的div

Question

當滾動瀏覽頁面時，我有一個粘貼到頁面頂部的導航欄。 當此導航欄固定在頁面頂部時，我想要出現一個標誌。 徽標位於div #navlogo中。

我目前有#navlogo設置爲顯示：無。我在想，當你滾動100px時，它的顯示器需要設置爲顯示塊或類似的東西。

我已經嘗試了一些東西，但我不是很擅長java，沒有運氣。

You can check out the JSFIDDLE here

這是我使用的設置我的導航欄腳本固定

$(window).scroll(function() { 
    var nav = $('#custom-bootstrap-menu'); 
    var body = $('body'); 
    var top = 100; 
    if ($(window).scrollTop() >= top) { 

     nav.addClass('navbar-fixed-top'); 
     body.addClass('padding-fifty'); 

    } else { 
     nav.removeClass('navbar-fixed-top'); 
     body.removeClass('padding-fifty'); 
    } 
}); 

和一點點的CSS

#logo { 
    height: 100px; 
} 

.padding-fifty { 
    padding-top: 50px; 
} 

#navlogo { 
    display: none; 
} 

正如你可以看到它設置NAV來固定，並通過添加50px來補償頁面偏移量。我需要在這裏設置#navlogo爲可見。任何人都可以提供一些援助

非常感謝您的幫助！

Answer 1

你可以在你的JavaScript設置CSS display屬性：

var logo = $('div#navlogo'); 
logo.css('display', 'block'); 

例如：https://jsfiddle.net/gx25ospo/3/

Answer 2

嘗試最後的追加這種風格你的CSS：

.navbar-fixed-top #navlogo { 
    display:block; 
} 

Answer 3

試試這個https://jsfiddle.net/gx25ospo/4/

.navbar-brand { 
display: none; 
} 

.visible { 
display: block; 
} 

JS

if ($(window).scrollTop() >= top) { 

    nav.addClass('navbar-fixed-top'); 
    body.addClass('padding-fifty'); 
    $('.navbar-brand').addClass('visible'); 

} else { 
    nav.removeClass('navbar-fixed-top'); 
    body.removeClass('padding-fifty'); 
    $('.navbar-brand').removeClass('visible'); 
}