Показать скрытый div, когда пользователь прокручивает страницу вниз

Question

У меня есть навигационная панель, которая прикрепляется к верхней части страницы, когда вы прокручиваете ее. Если этот навигатор установлен в верхней части страницы, я бы хотел, чтобы логотип появился. Логотип находится внутри div #navlogo.

В настоящее время у меня есть #navlogo для отображения: нет. Я думаю, что когда вы прокручиваете 100px, его дисплей должен быть установлен для отображения блока или чего-то подобного.

Я пробовал несколько вещей, но я не очень хорошо разбираюсь в java и не повезло.

You can check out the JSFIDDLE here

Это сценарий, я использую, чтобы установить мой Navbar к фиксированному

$(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; 
} 

Как вы можете видеть, что устанавливает СЧА в фиксируется и компенсирует смещение страницы путем добавления 50 пикселей. Мне нужно что-то здесь, чтобы установить #navlogo на видимое. Может ли кто-нибудь помочь?

Большое вам спасибо за помощь!

Answer 1

Вы можете установить свойство CSS display в вашем Javascript:

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

Например: https://jsfiddle.net/gx25ospo/3/

Answer 2

Попробуйте добавить этот стиль к вашей CSS наконец:

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

Answer 3

Try это 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'); 
}