如何在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中滾動更改品牌形象？

回答

相關問題