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只是一个普通的bootstrap固定导航栏，有两个导航栏品牌（小徽标有一个显示：隐藏;在加载时将其隐藏起来......任何想法？

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

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

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

2 个答案: