Добавить горизонтальную линию на прокрутку на boostrap navbar

Question

Мне нужно добавить горизонтальную линию к навигационной панели boostrap при прокрутке страницы. Проще говоря, когда загрузка страницы и navbar находятся сверху, строка не должна быть видимой, но когда пользователь прокручивает страницу вниз, мне нужно иметь видимую нижнюю строку навигационной панели.

Я знаю, что это можно достичь с помощью различных библиотек, таких как путевые точки или около того, но я ищу самый простой и чистый способ, как это сделать, в идеале, только с помощью jquery или boostrap.

Спасибо :)

Answer 1

<style> 
    .scrolled {border-bottom:1px solid #000;}  
</style> 

$(document).scroll(function(){ 
    $('#navbar').toggleClass('scrolled', $(this).scrollTop() > 1); 
}); 

предполагается, что ваш Navbar имеет идентификатор "NavBar".

Это добавит класс «прокручивается» на навигационную панель в любое время, когда вы прокрутите более 1 пикселя вниз, и затем сможете стилизовать его в CSS. Он также исчезнет, ​​когда вы вернетесь в начало страницы.