【问题标题】:How to add logo to Bootstrap's affixed nav如何在 Bootstrap 的附加导航中添加徽标
【发布时间】:2014-04-17 04:20:15
【问题描述】:

当用户滚动时,我正在尝试将较小版本的网站徽标添加到 Bootstrap 的附加导航栏。

这是我的site

这就是我目前为止一直在做的事情...我尝试使用较小的徽标添加到 nav.affix 中,但没有奏效。我走对了吗?

#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.8);
}
#nav #nav-img {
background-image:url(http://static.tumblr.com/bw1wxme/rOYn2c6na/logo-small.jpg);
}
#nav.affix #nav-img {
display:inline-block;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 180px;
}

这里是JSfiddle

【问题讨论】:

    标签: twitter-bootstrap nav affix


    【解决方案1】:

    看起来你可以通过几种不同的方式做到这一点。

    可能想尝试查看以下一些建议:

    CSS Approach

    HTML Approach

    编辑:

    你可以在javascript中做这样的事情:

    $(window).scroll(function(){
       var height = $(this).scrollTop();
       var brand = $("#brand");
       if (height > 100){
         brand.show();   
       }
       else{
          brand.hide();
       }
    });
    

    我已经更新了您的 jsfiddle 并进行了一些更改:Fiddle 它不能完全使用包含的布局,但它可以满足您的期望。我在您的 html 中添加了一个带有品牌 ID 和类别的 div。然后我将背景设置为您为徽标设置的网址。我还默认将其设置为隐藏。当您滚动时,徽标应该会出现并在您向上滚动到顶部时消失。

    【讨论】:

    • 我希望徽标在人们开始滚动后出现在导航栏上
    猜你喜欢
    • 2015-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-09
    • 1970-01-01
    • 2018-10-24
    • 1970-01-01
    相关资源
    最近更新 更多