可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

So I have this navbar with a logo on it. I would like the logo to be big when the user is in the header section of the page, but then shrink when the user scrolls down. Any way to do this?

 <!-- NAVBAR -->
        <nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">

            <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="container">
                <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
                    <div class="collapse navbar-collapse" id="navbarDiv">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">                     
                                <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>                         
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#about-us">About</a>                        
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#pricing">Pricing</a>                       
                            </li>                       
                        </ul>           
                    </div>                  
            </div>              
        </nav>

回答1:

You can do this with regular JS. You can trigger the change with a pixel accuracy, my example will trigger when you are 5 pixels from the top.

Place this script in your <head>.

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

function growShrinkLogo() {
  var Logo = document.getElementById("Logo")
  if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
    Logo.style.width = '30px';
  } else {
    Logo.style.width = '60px';
  }
}
</script>

and replace <img src="Images/logo.png" width="60px"> with <img src="Images/logo.png" style="width:60px" id='Logo'>

回答2:

You can achieve this using JQuery-

$(document).scroll(function() {
    $('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});

explanation- When scrolling- get the navbar element, change it's CSS as follows: if scrollTop() < 100 (we're not at the top of the page) - change the width to 50%. Otherwise change it to 100% (regular)

回答3:

Bare in mind that the suggested solutions so far will apply the css on every single scroll event (literally hundreds or even thousands of times), decreasing scrolling smoothness/performance.

I've made a little addition to the solution from Robin Wright which you can find a fiddle of here to test it. This ensures that the css is only applied when you cross the border of the header (in this case 150px).

The code is the following:

window.onscroll = function() {
  growShrinkLogo()
};

var Logo = document.getElementById("Logo");
var endOfDocumentTop = 150;
var size = 0;

function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

  if (size == 0 && scroll > endOfDocumentTop) {
    Logo.style.width = '30px';
    size = 1;
  } else if(size == 1 && scroll <= endOfDocumentTop){
    Logo.style.width = '60px';
   size = 0;
  }
}

PS. in the fiddle i've also added a transition for the logo.