具有不同大小徽标的 Bootstrap 动画导航栏

Question

我正在尝试为引导导航栏设置动画。当页面加载时，您会看到完整大小的徽标，当您向下滚动时，导航栏的大小会减小，并且较小的徽标会淡入。到目前为止，我遇到了一个故障，最终可能导致两个徽标都在视图中如果您向下滚动一点，然后快速向上滚动。因此，我正在寻找一种最佳方式来确保在任何给定时间只有一个徽标。这是我的 jQuery：

var header_closed = false;
var header_open = true;
var timer;

$(window).scroll(function() {
    if (timer) {
        window.clearTimeout(timer);
    }
    timer = window.setTimeout(function() {
        if ($(document).scrollTop() > 20 && header_closed === false) {
            header_closed = true;
            header_open = false;
            $('.biglogo').fadeOut("fast", function() {
                $('.navbar-header').animate({
                    height: "54px"
                }, 250, function() {
                    $('.smllogo').fadeIn(500);

                });
            });


        } else if ($(document).scrollTop() < 20 && header_open === false) {
            header_open = true;
            header_closed = false;
            $('.smllogo').fadeOut(500, function() {
                $('.navbar-header').animate({
                    height: "138px"
                }, 250, function() {
                    $('.biglogo').fadeIn('fast');
                });
            });
        }
    }, 200);
});

html 只是一个普通的引导固定导航栏，有两个导航栏品牌（小标志有一个 display: hidden; 加载时隐藏它..有什么想法吗？

Answer 1

您可以在动画期间更改 img 源吗？这意味着它们永远无法同时显示：

if ($(document).scrollTop() > 20 && header_closed === false) {
            header_closed = true;
            header_open = false;
            $('.logo').fadeOut("fast", function() {
                $('.navbar-header').animate({
                    height: "54px"
                }, 250, function() {
                    $('.logo').attr('src','small.jpg');
                    $('.logo').fadeIn(500);

                });
            });
} else if ($(document).scrollTop() < 20 && header_open === false) {
            header_open = true;
            header_closed = false;
            $('.logo').fadeOut(500, function() {
                $('.navbar-header').animate({
                    height: "138px"
                }, 250, function() {
                    $('.logo').attr('src','big.jpg');
                    $('.logo').fadeIn('fast');
                });
            });
        }
    }, 200);

Answer 2

我最近在我的一个项目中做了同样的事情，你可以在这里快速浏览一下：http://musichighcourt.com/soundcloudapp

我正在共享 jquery 代码和我用过的 css。

HTML

    <header>
        <div id="logo"><img src="img/logo.png" class="logo img-responsive"></div>
        <div id="nav" class="menu">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="http://musichighcourt.com/soundcloudapp/top-charts.php">Top Charts</a></li>
                <li><a href="#">Tips</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="user_login.php">Login|Signup</a></li>
            </ul>
        </div>
    </header>

jQuery：

$(window).scroll(function() {
    if ($(this).scrollTop() > 100){  
        $('header').addClass("sticky");
        $('#nav').addClass("sticky-menu");
        $('#logo').children('img').addClass("sticky-logo");
    }
    else{
        $('header').removeClass("sticky");
        $('#nav').removeClass("sticky-menu");
        $('#logo').children('img').removeClass("sticky-logo");
    }
});

根据您的方便更改此行中滚动的值：($(this).scrollTop() > 100)

CSS

/*header */
header{
    position: fixed;
    width:100%;
    height:70px;
    font-size:16px;
    text-transform:uppercase;
    font-family:'ubuntu' , sans-serif;
    transition:.5s;
    z-index:1000;
}

.sticky {
  font-size:14p;
  height: 50px;
  background: #171515;
}

#logo{
    float:left;
}

.logo{
    height:50px;
    margin-top:10px;
    margin-top:10px;
    margin-left:30px;
    transition:.3s;
}

.sticky-logo{
    margin:0px;
    padding:2px;
}

/* menu */

.menu{
    padding:24px;
    float:right;
    transition:.3s;
}

.sticky-menu{
    padding-top:14px;
    padding-bottom:14px;
    padding-right:0px;
}

#nav ul {
    list-style-type: none;
}

#nav ul li{
    margin-right:20px;
    display:inline;
}

#nav ul li a{
    text-decoration:none;
    color:#fff;
}

如果这有帮助，请告诉我。 谢谢