手機上的Bootstrap導航欄

Question

以下是我使用的代碼段，但在手機上有navbar問題。當您摺疊菜單並向下滾動時，navbar調整大小以填充屏幕並且無法取消折疊。我認爲它打破了，因爲滾動時會出現一個小徽標。

CodePen：http://codepen.io/warzone246/pen/HjBub

HTML

<!-- Fixed navbar --> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     <div class="small-logo-container"> 
     <a class="small-logo" href="#">↥Small Logo</a> 
     </div> 
    </div> 
    <div class="navbar-collapse collapse"> 

     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Active</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
    </div> 
</div> 

<div class="container-fluid big-logo-row"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 big-logo-container"> 
     <h1 class="big-logo">↧Big Logo</h1> 
     </div> 
     <!--/.col-xs-12 --> 
    </div> 
    <!--/.row --> 
    </div> 
    <!--/.container --> 
</div> 
<!--/.container-fluid --> 

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-5 col-md-6 col-sm-8"> 
     <h2>Lorem ipsum</h2> 
     <p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p> 
     <p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p> 
     <p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p> 
     <p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p> 
     <p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p> 
     <p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p> 
     <p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p> 
     <p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p> 
     <p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p> 
     <p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p> 
     <p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p> 
     <p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p> 
     <p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p> 
     <p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p> 
    </div> 
    <!--/.col-xs-12 --> 
    </div> 
    <!--/.row --> 
</div> 
<!--/.container --> 

SCSS

/* ********************************* 
      Variables 
    ********************************** */ 
$navbar-height: 50px; 
$big-logo-padding: 15px; // adjust these 2 values 
$small-logo-padding: 2px; // of bottom padding to look nice 


/* ********************************* 
    Some Style Overrides on Bootstrap 
    ********************************** */ 
.navbar-inverse { 
    background: rgba(62,195,246,0); 
    border-bottom: none; 
} 
.navbar-inverse .navbar-toggle { 
    border: 1px solid #333; 
    border-color: rgba(255,255,255,0.7); 
} 

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { 
    border-color: transparent; 
    @media (max-width: 767px) { 
    background: rgba(255,255,255,0.75); 
    } 
} 
.navbar-inverse .navbar-nav > li > a { 
color: black; 


} 
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { 
color: #22F; 

} 
ul.nav { 
} 

/* ********************************* 
      Toolbar Logo 
    ********************************** */ 
.small-logo-container { 
    padding-top: $navbar-height; 
    height: $navbar-height; 
    overflow: hidden; 
    } 

.small-logo { 
    color: white; 
    font-size: 2.5em; 
    padding-bottom: $small-logo-padding; 
} 

/* ********************************* 
      Big Logo 
    ********************************** */ 
.big-logo-row { 
    background: gold; 

    .big-logo-container { 
    padding-top: $navbar-height; 
    } 

    h1 { 
    font-size: 4em; 
    margin:0; 
    padding:0 0 $big-logo-padding 0; 

    @media (min-width: 400px) { font-size: 4.5em; } 
    @media (min-width: 440px) { font-size: 5.5em; } 
    @media (min-width: 500px) { font-size: 6.5em; } 
    @media (min-width: 630px) { font-size: 7.5em; } 
    @media (min-width: 768px) { font-size: 9em; padding-bottom: $big-logo-padding * 2; } 
    @media (min-width: 1200px) { font-size: 12em; } 
    } 
} 

的JavaScript

$(window).scroll(function() { 
    var navbarColor = "62,195,246"; //color attr for rgba 
    var smallLogoHeight = $('.small-logo').height(); 
    var bigLogoHeight = $('.big-logo').height(); 
    var navbarHeight = $('.navbar').height(); 

    var smallLogoEndPos = 0; 
    var smallSpeed = (smallLogoHeight/bigLogoHeight); 

    var ySmall = ($(window).scrollTop() * smallSpeed); 

    var smallPadding = navbarHeight - ySmall; 
    if (smallPadding > navbarHeight) { 
    smallPadding = navbarHeight; 
    } 
    if (smallPadding < smallLogoEndPos) { 
    smallPadding = smallLogoEndPos; 
    } 
    if (smallPadding < 0) { 
    smallPadding = 0; 
    } 

    $('.small-logo-container ').css({ 
    "padding-top": smallPadding 
    }); 

    var navOpacity = ySmall/smallLogoHeight; 
    if (navOpacity > 1) { 
    navOpacity = 1; 
    } 
    if (navOpacity < 0) { 
    navOpacity = 0; 
    } 
    var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')'; 
    $('.navbar').css({ 
    "background-color": navBackColor 
    }); 

    var shadowOpacity = navOpacity * 0.4; 
    if (ySmall > 1) { 
    $('.navbar').css({ 
     "box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")" 
    }); 
    } else { 
    $('.navbar').css({ 
     "box-shadow": "none" 
    }); 
    } 

}); 

Answer 1

你的問題是滾動功能。
因爲您將您的smallPadding設置爲navbarHeight - ySmall並且未將其重置爲原始值，所以每次滾動時，smallPadding的值都會變得越來越大。
我剛剛設置了var smallPadding = 0;開始時爲，現在它工作得很好。

$(window).scroll(function() { 
    var navbarColor = "62,195,246"; //color attr for rgba 
    var smallLogoHeight = $('.small-logo').height(); 
    var bigLogoHeight = $('.big-logo').height(); 
    var navbarHeight = $('.navbar').height(); 

    var smallLogoEndPos = 0; 
    var smallSpeed = (smallLogoHeight/bigLogoHeight); 

    var ySmall = ($(window).scrollTop() * smallSpeed); 

    var smallPadding = 0; 
    if (smallPadding > navbarHeight) { 
     smallPadding = navbarHeight; 
    } 
    if (smallPadding < smallLogoEndPos) { 
     smallPadding = smallLogoEndPos; 
    } 
    if (smallPadding < 0) { 
     smallPadding = 0; 
    } 
    ............... 
}); 

希望這會幫助你！

這裏是演示jsFiddle