zwl1619 zwl1619 - 7 months ago 62
Javascript Question

About Scrollspy and ".sticky" in Bootstrap 4

Below is my demo,my question is about Scrollspy and ".sticky" in Bootstrap 4.

1、About Scrollspy:

I want to set

data-offset="20"
,where should I put it?

2、About ".sticky":

I want the nav
id="navbar-example"
to be sticky when it touch the top,
how to do it? I tried the css below,but it didn't work.

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


demo:

<!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>

Answer

So as for your first quesiton you put the data offset in the body tag where you call the scrollspy plugin like so:

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

Also if you are going to initiate scrollspy through the body tag you don't need to initiate it again with jquery so you can remove the script:

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

As for your second question you have the correct css but you have to put this in with an element. So add this to the .col-md-3 sticky before your .nav-pills. Just so you know that css sticky is experimental and will not work with a lot of browsers most importantly Chrome, so check out this article that gives you basically everything that you need to know about sticky along with support tables and a polyfill. You can find the article here http://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042 . If you are going to use css sticky I highly suggest you use the polyfill it is really easy to use just need to add the javascript file and call it with jquery. Below I have set up a demo for you to use and included a link to the polyfill's cdn and initiated the polyfill with jquery.

Here is your revised demo:

<!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>

Copy and paste this in and see the differences.

Hope this helps

Comments