我正在使用折叠功能在滚动时折叠导航栏。当导航栏崩溃时,我需要调整我的品牌徽标大小,以便在调整导航栏大小后正确匹配。我试图在更改填充和分钟时对徽标应用平滑过渡效果。大小
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-left>img").addClass ("top-nav-collapse-logo");
$(".navbar-brand").addClass ("navbar-brand-modified");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-left>img").removeClass ("top-nav-collapse-logo");
$(".navbar-brand").removeClass ("navbar-brand-modified");
}
});

/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
height: 100%;
width: 100%;
}
html {
height: 100%;
width: 100%;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
.top-nav-collapse-logo {
padding-top: 6px;
min-width: 35px !important;
-webkit-transition: padding-top: 0.1s ease;
-moz-transition: padding-top: 0.1s ease;
transition: padding-top: 0.1s ease;
}
.navbar-brand-modified {
padding: 17px 5px 5px 25px !important;
}
}
.navbar-left>img {
min-width: 40px;
}
.cleaningservices p {
text-align: left;
}
.navbar-brand {
padding-left: 25px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<header>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #CFE4F1">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="#home"><img alt="Brand" src="/images/logo.svg"><a href="#home" class="navbar-brand">A Company</a></a>
<div class="supermaid-logo"></div>
</div>
&#13;
P.S。很抱歉,如果我没有正确执行该代码段,我就不知道如何在代码段中使导航栏崩溃。无论如何,这里发生了什么:https://gyazo.com/99ccbdbba530974e89ef9ae484a15a79
徽标+品牌名称只是更改填充和大小,我希望它们在填充差异和大小之间平滑过渡。
答案 0 :(得分:0)
IT似乎在css规则中存在拼写错误:
.top-nav-collapse-logo {
padding-top: 6px;
min-width: 35px !important;
-webkit-transition: padding-top: 0.1s ease;
-moz-transition: padding-top: 0.1s ease;
transition: padding-top: 0.1s ease;
}
您需要在:
padding-top