Jquery 交换图像并调用CSS在引导导航栏中重新定位元素

这里的基本/中间前端开发

$(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

nav中交换图像后，我真的很难定位图像，这里是我的黑客组合

jQuery

我正在调用类“

small logo

”，它更改了position属性并添加了一些

左边距

，但它不想移动。我做错了什么

CSS:

此处的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>

切换导航

由于元素已完全定位，请尝试改用

左：-15px

。或者，如果您想将某些内容向左移动15px，也可以使用

transform:translateX（-15px）

<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>