关于Scrollspy和Bootstrap 4中的“.sticky”

时间：2016-05-02 19:21:28

标签： javascript jquery twitter-bootstrap

下面是我的演示，我的问题是关于Scrollspy和Bootstrap 4中的“.sticky”。​​

1，关于Scrollspy：
我想设置data-offset="20"，我应该把它放在哪里？

2，关于“.sticky”：
我希望导航id="navbar-example"在触摸顶部时是粘性的， 怎么做？我尝试了下面的CSS，但它没有用。 

 .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 15px;
        }

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
    <style>
        body {
            position: relative;
        }

        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 15px;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#navbar-example">
<div class="container">
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked" id="navbar-example">
                <li class="nav-item">
                    <a class="nav-link" href="#article1">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article2">Link2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article3">Link3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article4">Link4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article5">Link5</a>
                </li>
            </ul>
        </div>

        <div class="col-md-9">
            <h4 id="article1">Article1</h4>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <h4 id="article2">Article2</h4>
            <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua
                cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater
                food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic
                exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
            <h4 id="article3">Article3</h4>
            <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing
                banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,
                echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim
                messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
            <h4 id="article4">Article4</h4>
            <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente
                veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee
                wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't
                heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial
                keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.
                Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
            <h4 id="article5">Article5</h4>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
        </div>
    </div>
</div>

<!-- JavaScripts -->
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.3/holder.min.js"></script>
<script>
        $('body').scrollspy({target: '#navbar-example'});
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：3)

因此，对于您的第一个问题，您将数据偏移量放在body标签中，您可以像这样调用scrollspy插件：

<body data-spy="scroll" data-target="#navbar-example" data-offset="20">

此外，如果您要通过body标签启动scrollspy，则不需要使用jquery再次启动它，以便您可以删除脚本：

$('body').scrollspy({target: '#navbar-example'});

至于你的第二个问题，你有正确的CSS，但你必须用一个元素。因此，请在.col-md-3 sticky之前将其添加到.nav-pills。只是因为你知道css sticky是实验性的，并且不适用于很多浏览器，最重要的是Chrome，所以看看这篇文章，它基本上为你提供了有关粘性以及支持表和polyfill的所有信息。你可以在http://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042找到这篇文章。如果你打算使用css sticky我强烈建议你使用polyfill它真的很容易使用只需要添加javascript文件并用jquery调用它。下面我设置了一个演示供您使用，并包含一个指向polyfill的cdn的链接，并使用jquery启动了polyfill。

以下是您修改过的演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
    <style>
      body{position:relative; }
      .sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 15px;
      }
    </style>
</head>
<body data-spy="scroll" data-target="#navbar-example" data-offset="20">
<div class="container">
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3 sticky">
            <ul class="nav nav-pills nav-stacked" id="navbar-example">
                <li class="nav-item">
                    <a class="nav-link" href="#article1">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article2">Link2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article3">Link3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article4">Link4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#article5">Link5</a>
                </li>
            </ul>
        </div>

        <div class="col-md-9">
            <h4 id="article1">Article1</h4>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <h4 id="article2">Article2</h4>
            <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua
                cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater
                food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic
                exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
            <h4 id="article3">Article3</h4>
            <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing
                banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl,
                echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim
                messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
            <h4 id="article4">Article4</h4>
            <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente
                veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee
                wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't
                heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial
                keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko.
                Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
            <h4 id="article5">Article5</h4>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
            <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui.
                Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's
                photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you
                probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil
                tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
            <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda.
                Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie
                gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident
                brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan
                readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
            </p>
        </div>
    </div>
</div>

<!-- JavaScripts -->
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.3/holder.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.4/stickyfill.min.js"></script>
<script>
$('.sticky').Stickyfill();
</script>
</body>
</html>

将其复制并粘贴并查看差异。

希望这有帮助

相关问题
最新问题