How to animate and shrink bootstrap navbar on scroll?-CodePudding

<form id="form1" runat="server">
        
            <div>
                <nav  id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px);">
                    <a  href="#"> <img src="imgs/vmc_logo.png" height="50" /></a>
                    <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span ></span>
                    </button>

                    <div  id="navbarSupportedContent">
                        <ul >
                            <li >
                                <a  href="homepage.aspx">Home</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

My navbar not shrinking (Sticky-top will not work good as there is logo in it)

Only found solutions on sticky-top and jqquery

CodePudding user response：

.navbar {
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .navbar {
    height: 60px;
  }
}

The above provided CSS code sets the height to 80px, and once the user scrolls past 992px it's going to shrink to 60px. You could try that, or using JS/JQuery.

CodePudding user response：

<script src="Jquery/js/jquery-3.6.0.slim.js"></script>
<script>
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()<=35){
                $(".navscroll").removeClass('scroll_navbar')
                $("nav").css("padding", "20px");
            }
            else{
                $(".navscroll").addClass('scroll_navbar')
                $("nav").css("padding", "0px");
            }
        })
    })
</script>

used this jquery to change directly inline css. idk why asp.net web app not applying external css attribute specifically Jquery one