html - Scrollspy Bootstrap 4 Beta - Not working on Codepen -


i’m trying use bootstrap 4 scrollspy feature portfolio page, can’t make work in codepen.

i searched in stackoverflow , found used feature in codeply, here’s link, , works fine.

i took code , put on codepen, couldn’t make work: here’s link. html.

<body data-spy="scroll" data-target="#navbarcodeply" data-offset="70">  <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">     <div class="container">       <a class="navbar-brand" href="#">codeply</a>       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcodeply">         <span class="navbar-toggler-icon"></span>       </button>       <div class="collapse navbar-collapse" id="navbarcodeply">         <ul class="nav navbar-nav">             <a class="nav-link" href="#sec1">one</a>             <a class="nav-link" href="#sec2">two</a>             <a class="nav-link" href="#sec3">three</a>         </ul>       </div>     </div>  </nav>  <div class="container">    <h6 class="mb-5">bootstrap 4 scrollspy example</h6>    <div class="row">      <div class="col-12 col-sm-8">         <h3 id="sec1">one</h3>         <p>sriracha biodiesel taxidermy organic post-ironic, intelligentsia salvia mustache 90's code editing brunch. butcher polaroid vhs art party, hashtag brooklyn deep v pbr narwhal sustainable mixtape swag wolf squid tote bag. tote bag cronut semiotics,             raw denim deep v taxidermy messenger bag. tofu yolo etsy, direct trade ethical odd future jean shorts paleo. forage shoreditch tousled aesthetic irony, street art organic bushwick artisan cliche semiotics ugh synth chillwave meditation.             shabby chic lomo plaid vinyl chambray vice. vice sustainable cardigan, williamsburg master cleanse hella diy 90's blog.</p>          <p>ethical kickstarter pbr asymmetrical lo-fi. dreamcatcher street art carles, stumptown gluten-free kickstarter artisan wes anderson wolf pug. godard sustainable haven't heard of them, vegan farm-to-table williamsburg slow-carb             readymade disrupt deep v. meggings seitan wes anderson semiotics, cliche american apparel whatever. helvetica cray plaid, vegan brunch banksy leggings +1 direct trade. wayfarers codeply pbr selfies. banh mi mcsweeney's shoreditch selfies,             forage fingerstache food truck occupy yolo pitchfork fixie iphone fanny pack art party portland.</p>         <hr>         <h3 id="sec2">two</h3>         <p>sriracha biodiesel taxidermy organic post-ironic, intelligentsia salvia mustache 90's code editing brunch. butcher polaroid vhs art party, hashtag brooklyn deep v pbr narwhal sustainable mixtape swag wolf squid tote bag. tote bag cronut semiotics,             raw denim deep v taxidermy messenger bag. tofu yolo etsy, direct trade ethical odd future jean shorts paleo. forage shoreditch tousled aesthetic irony, street art organic bushwick artisan cliche semiotics ugh synth chillwave meditation.             shabby chic lomo plaid vinyl chambray vice. vice sustainable cardigan, williamsburg master cleanse hella diy 90's blog.</p>          <p>ethical kickstarter pbr asymmetrical lo-fi. dreamcatcher street art carles, stumptown gluten-free kickstarter artisan wes anderson wolf pug. godard sustainable haven't heard of them, vegan farm-to-table williamsburg slow-carb             readymade disrupt deep v. meggings seitan wes anderson semiotics, cliche american apparel whatever. helvetica cray plaid, vegan brunch banksy leggings +1 direct trade. wayfarers codeply pbr selfies. banh mi mcsweeney's shoreditch selfies,             forage fingerstache food truck occupy yolo pitchfork fixie iphone fanny pack art party portland.</p>         <h3 id="sec3">three</h3>         <p>sriracha biodiesel taxidermy organic post-ironic, intelligentsia salvia mustache 90's code editing brunch. butcher polaroid vhs art party, hashtag brooklyn deep v pbr narwhal sustainable mixtape swag wolf squid tote bag. tote bag cronut semiotics,             raw denim deep v taxidermy messenger bag. tofu yolo etsy, direct trade ethical odd future jean shorts paleo. forage shoreditch tousled aesthetic irony, street art organic bushwick artisan cliche semiotics ugh synth chillwave meditation.             shabby chic lomo plaid vinyl chambray vice. vice sustainable cardigan, williamsburg master cleanse hella diy 90's blog.</p>          <p>ethical kickstarter pbr asymmetrical lo-fi. dreamcatcher street art carles, stumptown gluten-free kickstarter artisan wes anderson wolf pug. godard sustainable haven't heard of them, vegan farm-to-table williamsburg slow-carb             readymade disrupt deep v. meggings seitan wes anderson semiotics, cliche american apparel whatever. helvetica cray plaid, vegan brunch banksy leggings +1 direct trade. wayfarers codeply pbr selfies. banh mi mcsweeney's shoreditch selfies,             forage fingerstache food truck occupy yolo pitchfork fixie iphone fanny pack art party portland.</p>     </div>   </div>

and css.

body {   position: relative;   overflow-y: auto;   padding-top: 70px; /* padding fixed navbar */ }

as can see, when scrolldown in codepen nav items don’t change, in codeply do.

does know what’s wrong?

thanks in advance help.

juan betancourt.

ps: think it’s possible problem in css , javascript pen settings or in body tag attributes.

bootstrap 4 requires popper.js..

/popper.js/1.11.0/umd/popper.min.js

codeply automatically includes when select bootstrap 4, codepen not.


Comments

Post a Comment

Popular posts from this blog

Sort a complex associative array in PHP -

this question has answer here: php sort array subarray value 5 answers i have associative array in php like: $newarray1 = array ( [producta] => array ( [link] => http://sanjosespartan.com/blog/products/agile-java-development/ [visitcount] => 4 ) [productd] => array ( [link] => http://sanjosespartan.com/blog/products/intro-to-go/ [visitcount] => 1 ) [productg] => array ( [link] => http://sanjosespartan.com/blog/products/node-js-for-developers/ [visitcount] => 1 ) [productb] => array ( [link] => http://sanjosespartan.com/blog/products/beginning-mysql/ [visitcount] => 1 ) [productc] => array ( [link] => http://sanjosespartan.com/blog/products/computer-networks/ [visitcount] => 1 ) ...
Read more

vb.net - How to ignore if a cell is empty nothing -

how use roscolor() ignore value (like empty cell) ? color row if value upper 5 when there nothing in cell, want ignore roscolor() apply, how? public sub roscolor() integer = 0 quotedatagridview1.rows.count() - 1 step +1 dim val integer val = quotedatagridview1.rows(i).cells(3).value if val = vbempty quotedatagridview1.rows(i).defaultcellstyle.backcolor = color.white elseif val < 5 quotedatagridview1.rows(i).defaultcellstyle.backcolor = color.red elseif val > 5 , val < 10 quotedatagridview1.rows(i).defaultcellstyle.backcolor = color.lightyellow end if next end sub you can check empty value following public sub roscolor() integer = 0 quotedatagridview1.rows.count() - 1 step +1 dim val = quotedatagridview1.rows(i).cells(3).value if isdbnull(val) or val nothing quotedatagridview1.rows(i).defaultcellstyle.backcolor = color.white ...
Read more

recursion - Can every recursive algorithm be improved with dynamic programming? -

i first year undergraduate csc student looking competitive programming. recursion involves defining , solving sub problems. understand, top down dynamic programming (dp) involves memoizing solutions sub problems reduce time complexity of algorithm. can top down dp used improve efficiency of every recursive algorithm overlapping sub problems? dp fail work , how can identify this? the short answer is: yes. however, there constraints. obvious 1 recursive calls must overlap. i.e. during execution of algorithm, recursive function must called multiple times same parameters. lets truncate recursion tree memoization. can use memoization reduce number of calls. however, reduction of calls comes price. need store results somewhere. next obvious constraint need have enough memory. comes not-so obvious constraint. memory access requires time. first need find result stored , maybe copy location. in cases, might faster let recursion calculate result instead of loading somewher...
Read more