Bootstrap 附加导航（Affix）插件

新老农

于 2021-01-09 11:33:02 发布

阅读量259

点赞数

分类专栏： Bootstrap HTML

原文链接：https://www.runoob.com/bootstrap/bootstrap-affix-plugin.html

版权

HTML 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

Bootstrap

4 篇文章 0 订阅

订阅专栏

$(’#myAffix’).affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$(’.bs-footer’).outerHeight(true))
}
}
})
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 附加导航（Affix）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Custom Styles */
    ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */
    }
</style>
<script>
$(document).ready(function(){
    $("#myNav").affix({
        offset: { 
            top: 125 
      }
    });
});
</script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
   <div class="jumbotron">
        <h1>Bootstrap Affix</h1>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" id="myNav">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">第一部分</h2>
            <p>Lorem ipsum dolor sit amet, Integer faucibus ligula.</p>
            <p>VestibAliq.</p>
            <hr>
            <h2 id="section-2">第二部分</h2>
            <p>Nullam hendr.</p>
            <hr>
            <h2 id="section-3">第三部分</h2>
              <p>Quisque pharetra potenti.</p>
            <hr>
            <h2 id="section-4">第四部分</h2>
            <p>Suspendisse a orci facilisis, quis varius libero.</p>
            <p>Vestibulum quis quam ut magna consequat faucibus. hendrerit tellus.</p>
            <p>Phasellus fermentum, Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
            <p>Ut ut risus nisl. Fusce eu suscipit massa.</p>
            <hr>
            <h2 id="section-5">第五部分</h2>
            <p>Nam eget purus nec est consectetur vehicula. Vivamus non metus ac justo porta volutpat.</p>
            <p>Vivamus mattis accumsan erat, eu congue neque rutrum.</p>
            <p>Suspendisse a orci facilisis.</p>
        </div>
    </div>
</div>
</body>
</html>

新老农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 附加导航（Affix）插件

$(’#myAffix’).affix({offset: {top: 100, bottom: function () {return (this.bottom =$(’.bs-footer’).outerHeight(true))}}})<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Bootstrap 附加导航（Affix）插件</title>
复制链接

扫一扫