如何在bootstrap中滚动更改品牌形象？

当我滚动它时，我已经设法改变图像，但是它的定位完全错误并且不在导航栏中。我希望图像在用户向下滚动时改变颜色，但将图像置于CSS中会使其错位。有没有一个好的方法来做到这一点？如何在bootstrap中滚动更改品牌形象？

CSS：

 #fh5co-header .navbar-brand { 
     float: left; 
     display: block; 
     font-size: 30px; 
     font-weight: 700; 
     padding-left: 0; 
     color: #fff; 
     background: url(../images/loc2.png); 


    } 
    #fh5co-header.navbar-fixed-top { 
     position: fixed !important; 
     background: #fff; 
     -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); 
     -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); 
     -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); 
     box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1); 
     margin-top: 0px; 
     top: 0; 

#fh5co-header.navbar-fixed-top .navbar-brand { 
    background: url(../images/loc.png); 
    color: #96281B;

HTML：

#fh5co-header.navbar-fixed-top .navbar-brand { 
     background: url(../images/loc.png); 
     color: #96281B; 


      <nav class="navbar navbar-default"> 
        <div class="navbar-header"> 
         <!-- Mobile Toggle Menu Button --> 
         <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a> 
        <a class="navbar-brand" href="index.html"></a> 
        </div> 
        <div id="navbar" class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li> 
         <li><a href="#" data-nav-section="work"><span>Menus</span></a></li> 
         <li><a href="#" data-nav-section="testimonials"><span>Testimonials</span></a></li> 
         <li><a href="#" data-nav-section="services"><span>Services</span></a></li> 
         <li><a href="#" data-nav-section="about"><span>About</span></a></li> 
         <li><a href="#" data-nav-section="contact"><span>Contact</span></a></li> 
         <li><a href="#"><i class="icon-facebook"></i></a></li> 
         <li><a href="#"><i class="icon-twitter"></i></a></li> 


         </ul> 
         <ul class="social social-circle"> 

          </ul> 
        </div> 
        </nav>

var windowScroll = function() { 
    var lastScrollTop = 0; 

    $(window).scroll(function(event){ 

     var header = $('#fh5co-header'), 
      scrlTop = $(this).scrollTop(); 

     if (scrlTop > 500 && scrlTop <= 2000) { 


      header.addClass('navbar-fixed-top fh5co-animated slideInDown'); 
     } else if (scrlTop <= 500) { 
      if (header.hasClass('navbar-fixed-top')) { 
       header.addClass('navbar-fixed-top fh5co-animated slideOutUp'); 
       setTimeout(function(){ 
        header.removeClass('navbar-fixed-top fh5co-animated slideInDown slideOutUp'); 
       }, 100); 
      } 
     } 

    }); 
};

来源

2016-03-01 Tom MJ

尝试财产以后这样的。

创建类之间进行切换，您可以在其中设置背景图像。

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 80) { 
     $(".navy").addClass("scrolling"); 
     $(".navbar-brand").addClass("navscroll"); 
    } else { 
     $(".navy").removeClass("scrolling"); 
     $(".navbar-brand").removeClass("navscroll"); 
    } 
    });

CSS：在导航栏等，这为我工作

.drop.menuscroll { 
 
    margin-top: 0px; 
 
    transition: 0.8s 
 
} 
 
.menu.linesscroll { 
 
    margin-top: 8px; 
 
    transition: 0.8s; 
 
} 
 
.navy.scrolling { 
 
    transition: 0.8s; 
 
    height: 50px; 
 
    margin-top: 0px; 
 
} 
 
.navbar-brand img.navscroll { 
 
    margin-top: -10px; 
 
    width: 63px; 
 
    transition: 0.8s; 
 
}

广场塔类。所有你需要做的就是修改类的细节以适合你的项目。

来源

2016-03-01 11:12:52 JoeyG

如何在bootstrap中滚动更改品牌形象？

回答

相关问题