交換圖像並調用CSS重新定位Bootstrap導航欄中的元素

Question

這裏是基本/中級前端開發;

$(window).scroll(function() { 
    if ($(".navbar").offset().top > 100) { 
     $('#small-logo').addClass('affix'); 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
     $('.navbar-header img').attr('src', 'img/logo_sm.png'); 
     $('#scrollSwap').addClass('small-logo') 
    } else { 
     $('#large-logo').removeClass('affix'); 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
     $('.navbar-header img').attr('src', 'img/logo_lg.png'); 
     $('#scrollBack').addClass("large-logo center-block"); 
    } 
}); 

我真的很掙扎它在我的編輯bootstrap導航交換後位置的圖像，這是我到目前爲止砍死在一起jQuery。

我打電話給班級'small-logo'，它改變了位置屬性並增加了一些margin-left，但它不想移動。我究竟做錯了什麼？

CSS：

.small-logo { 
    position: absolute; 
    margin-left: -15px; 
} 

HTML元素在這裏：

<div class="navbar-header"> 
    <div class="container"> 
     <div><img id="scrollSwap" class="small-logo visible-xs visible-sm hidden-md" src="img/logo_sm.png" /></div> 
     <div><img id="scrollBack" class="large-logo center-block hidden-sm hidden-xs" src="img/logo_lg.png" style="" /></div> 
    </div> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 
</div> 
<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="fleet.html">The Fleet</a></li> 
     <li><a href="#">Events</a></li> 
     <!-- <li><a href="#">Airstream Story</a></li> --> 
     <li><a href="#">Corporate</a></li> 
     <li><a href="#">Private Hire</a></li> 
     <li><a href="#">Structures</a></li> 
    </ul> 
</div> 

Answer 1

由於元素絕對定位，請嘗試使用left: -15px代替。或者，如果您想移動剩餘的15px，您也可以使用transform: translateX(-15px);。