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);。

交换图像并调用CSS以重新定位Bootstrap导航栏中的元素

1 个答案: