سایدبار چسبنده

سلام.
الانا دیگه کم‌کم از ویژگی position: sticky دارن استفاده می‌کنند. جدیدترین نسخه بوت‌استرپ(۴.۳.۱) از همین ویژگی استفاده می‌کنه.

ولی هنوز پشتیبانیش خوب نیست و بهتره از کدهای جاوااسکریپت یا جی‌کوئری استفاده کنید.

این کدهای است که خودم استفاده کردم. البته opacity اضافه هستش.

کلاس سی‌اس‌اس:

.sticky{position: fixed; top: 0; left: 0; right: 0; z-index: 2; opacity: .8; }
کدجی‌کوئری:

$(document).ready(function(){
            
            var navOffset = $("nav").offset().top;

            $(window).scroll(function(){
                if($(document).scrollTop() > navOffset){
                    $("nav").addClass("sticky");
                }
                else{
                    $("nav").removeClass("sticky");
                }
            });  
        });

اینم کد جاوااسکریپت خالص که تو سایت w3schools.com بود:

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById(“navbar”);
var sticky = navbar.offsetTop;

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add(“sticky”)
} else {
navbar.classList.remove(“sticky”);
}
}
</script>