data-offset in Bootstrap Scrollspy is not offseting at all

Question

Any value I set to data-offset for scrollspy does not work at all. Here are the relevant html, css, and js code:

HTML

<nav class="navbar navbar-fixed-top navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><strong>YOUNG'S PORTFOLIO</strong></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right enlargeItem">
        <li><a href="#aboutBox">ABOUT</a></li>
        <li><a href="#portfolioBox">PORTFOLIO</a></li>
        <li><a href="#contactBox">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

body {
      background-color: gray;
      padding-top: 110px;
      data-spy='scroll';
      data-target='.navbar';
      data-offset='';
      position: relative;
    }

JS

$('body').scrollspy();

When I scroll to target area where a tag is defined (#aboutBox, #portfolioBox, #contactBox), it does highlight the appropriate list item.

However, it is off a bit, so I wanted to change the offset by changing the data-offset but changing the data-offset does not do anything.

Here is the link to the codepen if someone wants to take a look at the whole thing

[This answer](https://stackoverflow.com/a/11814275/4881490) may help you — Joe B., Aug 10 '17 at 00:33

score 4 · Accepted Answer · answered Aug 10 '17 at 00:45

Argh. Couple things wrong with my code.

I was trying to set attributes using CSS! WOW rookie mistake. I need some sleep.
I was using navbar-fixed-top class. So I had to manually offset by 150px.

I applied this to my javascript:

$("body").attr({
    "data-spy": "scroll",
    "data-target": ".navbar"
  }).scrollspy({
    offset: 150
  });

Bobby Ramdin · Answer 2 · 2022-05-02T09:35:09.127

0

Come across this thread as i am looking to find out if you can have a negative value on data-offset.

In response to this post You don't have to add any extra JS or CSS for scrollspy to work it's all bundled with bootstrap, you would just add the attributes to the body tag. ref: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp

<body data-spy="scroll" data-target=".navbar" data-offset="150">

edited May 02 '22 at 09:35

answered May 01 '22 at 06:24

Bobby Ramdin

1
1

score 0 · Answer 3 · edited Nov 29 '22 at 00:32

0

Try this code :

$(document).ready(function () {
    offset = 10; // get extra padding
    nav_top = $("#tsnav"); // get the top navbar hieght 
    side_nav = $("#cve_info") // target nav
    nav_height = nav_top.outerHeight() + offset; // actual height from top where content go and fixed 
    
    side_nav.find("a").on('click', function () {
        let $el = $(this);
            id = $el.attr("href");

        $('html, body').scrollTop( $(id).offset().top - nav_height);
        return false;
    })
});

edited Nov 29 '22 at 00:32

chrslg

9,023
5
17
31

answered Nov 23 '22 at 05:41

Rajesh Chakraborty

1
1

Please, avoid "code only" answer, especially for old questions, since they don't really help people who may encounter similar problem, how hey could adapt it. If possible, it would be nice to take some times to explain why and how this answer works. – chrslg Nov 29 '22 at 00:33

data-offset in Bootstrap Scrollspy is not offseting at all

3 Answers3

Linked