Bootstrap 4.0.0-beta.2 Scrollspy活动类未通过页面滚动更新

时间:2018-02-15 22:33:11

标签: html css twitter-bootstrap bootstrap-4 scrollspy

我正在尝试使用HTML中的三个部分创建个人登录页面。这三个部分需要通过导航栏上的链接访问,并根据页面中的位置更新链接突出显示。链接到页面功能的不同部分工作正常,但是,当页面滚动时,链接上的突出显示不会更改为页面的当前部分,突出显示并停留在HTML中初始化的默认值。

Here是CodePen链接。您可以查看我的代码和页面预览,并查看向下滚动到页面的不同部分时蓝色突出显示如何不更新。

这是我的身体声明:

<body data-spy="scroll" data-target="#spy" data-offset="70">

这是我的导航栏设置:

<!-- Navbar -->
<nav id="spy" class="navbar fixed-bottom navbar-light bg-light">

    <a class="nav navbar-brand" href="#"><!-- LOGO --></a>

    <ul class="nav nav-pills">
        <li class="nav-item"> <a class="nav-link active" href="#about_me"> about me></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#portfolio"> portfolio </a> </li>
        <li class="nav-item"> <a class="nav-link" href="#contact_me"> contact me </a> </li>
    </ul>

</nav>

这是身体的其他部分:

<div class="bg-light p-3 rounded">
        <p id="about_me"> Cat ipsum dolor sit amet, woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now so kitty loves pigs but hunt by meowing loudly at 5am next
            to human slave food dispenser and stare at wall turn and meow stare at wall some more meow again continue staring . Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce if human is on laptop sit on the keyboard eat too much then
            proceed to regurgitate all over living room carpet while humans eat dinner or Gate keepers of hell stare at wall turn and meow stare at wall some more meow again continue staring so wake up wander around the house making large amounts of noise jump
            on top of your human's bed and fall asleep again try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard. Give me attention or face the wrath of my claws ears back wide eyed i cry and cry
            and cry unless you pet me, and then maybe i cry just for fun i like cats because they are fat and fluffy. Paw at your fat belly decide to want nothing to do with my owner today. I am the best instantly break out into full speed gallop across the house
            for no reason or meow all night having their mate disturbing sleeping humans and make muffins, so lick butt and make a weird face yet sweet beast. </p>
        <p> Stare at ceiling lick arm hair. I can haz purrrrrr stare at ceiling sit and stare. Cat dog hate mouse eat string barf pillow no baths hate everything mice so furrier and even more furrier hairball dream about hunting birds yet roll on the floor purring
            your whiskers off, find something else more interesting. Chase red laser dot lick arm hair yet loves cheeseburgers drink water out of the faucet, fall asleep upside-down attempt to leap between furniture but woefully miscalibrate and bellyflop onto
            the floor; what's your problem? i meant to do that now i shall wash myself intently so eat owner's food. Caticus cuteicus. Put butt in owner's face stare at guinea pigs yet cat is love, cat is life, cat ass trophy asdflkjaertvlkjasntvkjn (sits on keyboard)
            sleep on dog bed, force dog to sleep on floor for cats making all the muffins. Cats secretly make all the worlds muffins spill litter box, scratch at owner, destroy all furniture, especially couch and pushes butt to face or licks your face. Paw at
            your fat belly cat dog hate mouse eat string barf pillow no baths hate everything. </p>
        </p>

    </div>
    <hr>
    <div class="bg-light p-5 rounded">

        <h3 id="portfolio" class="text-center"> portfolio </h3>

        <p> Leave fur on owners clothes gnaw the corn cob. Kitty loves pigs knock over christmas tree. Ask for petting massacre a bird in the living room and then look like the cutest and most innocent animal on the planet sleep on dog bed, force dog to sleep on
            floor leave fur on owners clothes but scratch me there, elevator butt yet fooled again thinking the dog likes me but you are a captive audience while sitting on the toilet, pet me. Kitten is playing with dead mouse meoooow leave dead animals as gifts,
            and human is washing you why halp oh the horror flee scratch hiss bite meowing chowing and wowing, see owner, run in terror or rub face on everything. Weigh eight pounds but take up a full-size bed. Pooping rainbow while flying in a toasted bread costume
            in space annoy the old grumpy cat, start a fight and then retreat to wash when i lose yet fall asleep upside-down sit on human or sit on the laptop. </p>
        <p>Caticus cuteicus plop down in the middle where everybody walks throw down all the stuff in the kitchen but demand to be let outside at once, and expect owner to wait for me as i think about it kitty kitty hiss and stare at nothing then run suddenly
            away yet sit in box. I could pee on this if i had the energy wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Cat cat moo moo lick ears lick paws if it fits, i sits, yet stare at wall
            turn and meow stare at wall some more meow again continue staring head nudges curl into a furry donut for sleep everywhere, but not in my bed. Eat half my food and ask for more stick butt in face, and has closed eyes but still sees you but i cry and
            cry and cry unless you pet me, and then maybe i cry just for fun eat owner's food but chase red laser dot eat and than sleep on your face. Shake treat bag asdflkjaertvlkjasntvkjn (sits on keyboard) sweet beast, scratch me there, elevator butt attack
            feet, yet hide head under blanket so no one can see. </p>
    </div>
    <hr>
    <div class="bg-light p-5 rounded">
        <h3 id="contact_me" class="text-center"> contact me </h3>
        <p> Cat fur is the new black . Leave fur on owners clothes lick the curtain just to be annoying. Play riveting piece on synthesizer keyboard with tail in the air, or who's the baby. Throwup on your pillow claws in your leg dead stare with ears cocked for
            eat plants, meow, and throw up because i ate plants yet inspect anything brought into the house, and soft kitty warm kitty little ball of furr but eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then
            retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Eat and than sleep on your face cat cat moo moo lick ears lick paws sit and stare groom forever, stretch tongue and leave it slightly out, blep meowzer under the
            bed. Bleghbleghvomit my furball really tie the room together scream for no reason at 4 am and chew foot stare at wall turn and meow stare at wall some more meow again continue staring yet be a nyan cat, feel great about it, be annoying 24/7 poop rainbows
            in litter box all day for walk on car leaving trail of paw prints on hood and windshield. Hide head under blanket so no one can see my left donut is missing, as is my right, or russian blue mewl for food at 4am. Scream at teh bath sleep nap lick left
            leg for ninety minutes, still dirty but sit on the laptop. Disappear for four days and return home with an expensive injury; bite the vet purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table chase red
            laser dot vommit food and eat it again yet you have cat to be kitten me right meow paw at your fat belly, so put toy mouse in food bowl run out of litter box at full speed . Sleep on keyboard sniff all the things scratch leg; meow for can opener to
            feed me, yet ask for petting caticus cuteicus. Your pillow is now my pet bed hide from vacuum cleaner eat and than sleep on your face or purrrrrr meow all night so groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous
            for the rest of the day - checked. </p>
    </div>

我做得不好?我已将data-spy =“scroll”data-target =“#spy”data-offset =“70”添加到我的身体并将id正确标记为nav元素。

我已经花了三天时间在网上搜索类似问题的解决方案,我将我的代码与一些有效的东西进行了比较,但我总是最终遇到这个问题。导航栏中的链接工作正常,但当页面滚动到不同的部分时,链接的突出显示不会更新。

如何在滚动页面时突出显示更新?

1 个答案:

答案 0 :(得分:0)

您需要引用/安装popper.jsBootstrap depends on it

没有它,JS会出错,导致你的rolllspy无法正常工作。

Here's the updated working pen参考: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Working on Codeply(自动包括Bootstrap和任何依赖项)