Scrollspy mistakenly targeting the incorrect element

Upon examining this example, it is evident that Bootstrap Scrollspy is encountering issues with the navigation and not functioning as intended. The incorrect item is being assigned the .active class.

$('.spycontent').scrollspy({ target: 'nav' })
html, body {
  height:100%;
}

body > .container, body > .container > .row, .col-xs-6 {
  height:100%;
}
  
.col-xs-6 {
  overflow-y:auto;
}

.item {
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
    <div class="container">
        <div class="row">
            <nav class="col-xs-6">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#group1">group1</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question1">question1</a>
                            </li>
                            <li>
                                <a href="#question2">question2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#group2">group2</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question3">question3</a>
                            </li>
                            <li>
                                <a href="#question5">question5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-xs-6 spycontent">
                <div class="col-xs-12" id="group1">
                    group1
                    <div class="row">
                        <div class="col-xs-12 item" id="question1">
                            question1
                        </div>
                        <div class="col-xs-12 item" id="question2">
                            question2
                        </div>
                    </div>
                </div>
                <div class="col-xs-12" id="group2">
                    group2
                    <div class="row">
                        <div class="col-xs-12 item" id="question3">
                            question3
                        </div>
                        <div class="col-xs-12 item" id="question5">
                            question5
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

While the menu and content appear satisfactory, there seems to be an issue with highlighting the incorrect item. What could be causing this discrepancy?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

After investigating the issue, I discovered the root cause:

It appears that there was a conflict between my instructions and the browser's rendering of nested columns using TWBS CSS. Thankfully, by removing the nested structure, I was able to resolve the problem:

$('.spycontent').scrollspy({ target: 'nav' })
html, body {
  height:100%;
}

body > .container, body > .container > .row, .col-xs-6 {
  height:100%;
}
  
.col-xs-6 {
  overflow-y:auto;
}

.item {
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
    <div class="container">
        <div class="row">
            <nav class="col-xs-6">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#group1">group1</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question1">question1</a>
                            </li>
                            <li>
                                <a href="#question2">question2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#group2">group2</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question3">question3</a>
                            </li>
                            <li>
                                <a href="#question5">question5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-xs-6 spycontent">
                <div id="group1">
                    group1
                    <div class="row">
                        <div class="col-xs-12 item" id="question1">
                            question1
                        </div>
                        <div class="col-xs-12 item" id="question2">
                            question2
                        </div>
                    </div>
                </div>
                <div id="group2">
                    group2
                    <div class="row">
                        <div class="col-xs-12 item" id="question3">
                            question3
                        </div>
                        <div class="col-xs-12 item" id="question5">
                            question5
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom Vue Basic String Renderer for JSONForms

I'm delving into Vue JSONForms and attempting to develop a basic custom text renderer from scratch. While I am aware of the vue-vanilla package available in JSONForms, I want to grasp the fundamental requirements for creating a custom renderer as I an ...

javascriptvue.jsjsonforms

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

When attempting to add an Object from an API to my MongoDB Atlas database using Node.js, I receive an undefined error

Utilizing a third party API, I am able to retrieve a list of pokemons. My goal is to select specific ones and add them to a favorites list by clicking the "add" button. However, when attempting to display the list of favorite pokemon, all I see are objects ...

javascriptnode.jsmongodbexpress

Acquire the key name of an object during iteration in Jade

const information = { attribute1: 'value1', attribute2: 'value2', attribute3: 'value3' }; for each value, key in information li= value.keyname?? The desired result should be: <li>attribute1</li> <li ...

javascriptjsonnode.jspug

What's the Hold-Up with IntersectionObserver in Brackets?

As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing ...

javascripthtmlcss

The JQuery library seems to be unresponsive on my webpage, despite being correctly included

Despite trying multiple ways to include the JQuery library on my page, I keep encountering the "$ is not defined" error. I have ensured that all the links were correct and from various sources, both local and external. What other options should I consider ...

javascriptjquery

Selecting elements by their name using vanilla JavaScript

I am facing an issue where I have to assign a value to a checkbox based on certain variables. The challenge lies in the naming convention used in the HTML I am working with: <input id="jc_1" type="checkbox" name="jc[1]"> <input id="jc_2" type="c ...

javascript

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

The addDays method cannot be used with date variables

Having two TextBoxes where I input 2 dates and try to retrieve an array of dates between them. Here is the code I'm using: $(".txtto").change(function () { var dates = new Array(); var dateto = new Date(); ...

javascriptjqueryasp.net

Ajax - How to interact with a live PHP script in the background?

Perhaps this question may come across as somewhat trivial, but I find myself grappling with a solution and feeling a bit stuck. Here's the situation at hand : I am currently using Ajax to carry out a series of tasks. Specifically, I am queuing up ( ...

phpjqueryajaxcodeigniter

Difficulty encountered with text truncation provided by Bootstrap 4 in a table cell

Many questions on SE address this particular issue in Bootstrap 3 and have found solutions by adding a custom class. In Bootstrap 4, a text-truncate class was introduced to restrict the display of text within an element, and we have successfully implemente ...

htmlcssbootstrap-4

Positioning elements on the web page using CSS tiles

Greetings! I am currently working on a website that utilizes tiles similar to this: https://i.sstatic.net/OzKQv.png Everything seems to be in place, except for one tile that is not aligning with the rest. I am struggling to figure out how to position it c ...

htmlcssless

White edges on Firefox border-radius style

One issue in Firefox is its inability to properly handle the clipping of rounded corner elements, especially when multiple backgrounds are involved. This problem can sometimes be resolved by setting background-clip: content-box within a class for non-absol ...

htmlcssfirefoxborder-radius

Certain conditions in JavaScript are not executed by Internet Explorer

I am currently working on a Html file that involves XSLT. I have integrated some JavaScript code for filtering specific rows within tables. However, I have encountered an issue where certain if-cases in my JavaScript are not executing as expected when usin ...

javascriptinternet-explorer-11

Ensuring that when I access my project on Internet Explorer, it displays the texttoindex.component.html page is important to me

I need to determine if my project is being opened in Internet Explorer. If it is, the first component should be displayed, otherwise a different component should be shown in another browser OS. import { Component, AfterViewInit} from '@angular/c ...

javascriptangulartypescriptangular-ui-router

What is the reason behind Angular displaying the output of a successful HTTP post request as 'undefined'?

During the development of my MEAN stack application on a Windows 10 environment, I encountered an issue with one of the HTTP POST requests using Mongoose (v4.4.5) to connect to MongoDB. The request successfully wrote data to MongoDB, but the response recei ...

javascriptangularexpressmongoose

Capturing an image in a desired size with html2canvas and saving

I am looking to modify my code in order to generate an image with dimensions of 1080x1080px instead of the current size of 537x537px. How can I achieve this, and ensure that the downloaded image is also in high screenshot quality? <div class="for ...

javascripthtmljqueryhtml2canvastodataurl

Utilize jQuery's animate method to scroll to the top after toggling a class in Vue

I am in the process of developing a FAQ page using vue.js Here is what I have implemented so far: <li v-for="i in items | searchFor searchString" v-on:click="toggleCollapse(i)" :class="{ collapsed: i.collapse, expanded: !i.collapse }" > <p> ...

javascriptjqueryclassvue.jsjquery-animate

What is the most effective way to retrieve emoji images in a chat using DiscordJS?

I am aiming to create a function that allows me to run a simple command like $yoink. This command would essentially convert the last sent emoji in the chat into an image that I can then download. I have a similar functionality already set up, however, it c ...

javascriptnode.jsdiscorddiscord.js

My JavaScript seems to be having an issue with .className - can anyone help me troubleshoot

I'm currently working on a navigation menu, and my objective is to have the class change to .nav-link-active when a link is clicked, while also reverting the current .nav-link-active back to .nav-link. Here's the code snippet I am using: <he ...

javascripthtml