我想在页面加载时使导航更小,并从导航中删除徽标

时间:2014-03-28 13:01:42

标签: javascript jquery html css

$(window).scroll(function(){
            if($(document).scrollTop() < '116px'){
                 $('#logo_top').hide();
            } else {
                $('#logo_top').show();
            }
        });

上面的代码是我试图显示和隐藏图像的jquery 当图像解析时,#navi-top必须向上移动

这是我修复导航的html:

    <div id="navi" class="overflow">
        <div class="push-off-left-m">
            <div id="search-top" >

                <input id="search-box" onfocus="removeValue()" type="text" placeholder="EQUINITI GROUP" value="">
                <button id="btn-search"><img src="img/arrows.png" alt="arrows"></button>
            </div>
        </div>
            <div id="navi-top" class="push-off-right-s">
                <ul>
                    <li><a href="#">The Group</a></li>
                    <li><a href="#" class="active">Working Together</a></li>
                    <li><a href="#">Paymaster</a></li>
                    <li><a href="#">Claybrook</a></li>
                    <li><a href="#">Vote for a sidekick</a></li>
                </ul>
            </div>
            <div id="logo_top" class="push-off-left-m" ><img src="img/logo.png" alt="EQUINITI GROUP"></div>


    </div>

1 个答案:

答案 0 :(得分:1)

使用lessThan将字符串'116px'与javascript中的数字进行比较总是返回false,因此您永远不会隐藏您的徽标。 ScollTop返回一个整数,只需将其与 116

进行比较
$(window).scroll(function(){
    if($(document).scrollTop() < 116){
         $('#logo_top').hide();
    } else {
        $('#logo_top').show();
    }
});