Exclude specific IDs from Bootstrap 4 scrollspy functionality

I have consecutive sections, and in between them I have an aside without a corresponding anchor. The issue is that the scrollspy is active with the previous section. I want to adjust the scrollspy so that nothing is highlighted as active at that point, and it should only resume when the next section with a valid anchor appears. I've tried various solutions from Exclude ID in Twitter Bootstrap Scrollspy, but they don't seem to work in bootstrap 4. I can't even get the trigger to work by using:

$('#nav-links').on('activate.bs.scrollspy', function () { 
// or $('#nav-links li').on('activate.bs.scrollspy', function () {
// or $('#nav-links li').on('activate',  function(){
    alert('sdsd'); // no alert, but scrollspy is working
})

How can I configure the scrollspy to only highlight elements when the IDs of navigation links match those of scrolling elements, excluding others?

a) (partial help) How do I capture scrollspy firing events?

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

It may appear unconventional, but this method seems to be the only way to achieve the desired outcome without altering the scrollspy JavaScript code.

The concept involves creating hidden anchors for the aside elements as well. As the order of the menu items does not affect the scrollspy, these "extra" menu items can be grouped together and concealed within a single parent element. Refer to the snippet below for more details.

#content {
    position: relative;
    overflow-y: scroll;
    height: 100vh;
}

/* Just basic styling */
#content > div {
    height: 50vh;
    padding: 15px;
}
#content > div:nth-child(2n) {
    background-color: lightgrey;
}
#content > div:last-child {
    height: 100vh;
}
.aside {
    background-color: pink !important;
}
<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            <nav id="navbar-scollspy" class="navbar navbar-light bg-light flex-column">
                <a class="navbar-brand" href="#">Navbar</a>

                <nav class="nav nav-pills flex-column">
                    <a class="nav-link" href="#section-1">Section 1</a>
                    <a class="nav-link" href="#section-2">Section 2</a>
                    <a class="nav-link" href="#section-3">Section 3</a>
                    <a class="nav-link" href="#section-4">Section 4</a>

                    <!-- Hidden menu items for asides -->
                    <div class="d-none">
                        <a class="nav-link" href="#aside-1">Aside 1</a>
                        <a class="nav-link" href="#aside-2">Aside 2</a>
                    </div>
                </nav>
            </nav>
        </div>

        <div id="content" class="col-9" data-spy="scroll" data-target="#navbar-scollspy">
            <div id="section-1">
                <h4>Section 1</h4>
                <p>...</p>
            </div>
            
            <div id="aside-1" class="aside">
                <h4>Aside 1</h4>
                <p>...</p>
            </div>
            
            <div id="section-2">
                <h4>Section 2</h4>
                <p>...</p>
            </div>
            
            <div id="aside-2" class="aside">
                <h4>Aside 2</h4>
                <p>...</p>
            </div>

            <div id="section-3">
                <h4>Section 3</h4>
                <p>...</p>
            </div>

            <div id="section-4">
                <h4>Section 4</h4>
                <p>...</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Additionally, you can monitor the activate.bs.scrollspy event on the spied element ([data-spy="scroll"]) or any related parent elements such as $('body') and $(document) in the following manner:

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function(event) {
    console.log('activate.bs.scrollspy', event);
})

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

Utilizing JavaScript to trigger an email with PHP variables included

i am trying to pass a few php variables using a javascript trigger. Everything seems to be working with the variables, databases, and script but I am struggling with the PHP part. Here is my attempt at the PHP code, although it clearly has some issues. I ...

javascriptphphtmlemail

Attempting to directly link to a specific slide within a jquery slider using the URL

Is there a way to link to a specific slide in a slider from a button on a different page without using anchor links? I tried using anchor links within the slider document itself but that didn't work. It would be great if I could access the slides lik ...

jqueryarraysloadslider

Pattern for either one or two digits with an optional decimal point in regular expressions

Currently, I'm utilizing for input masking. I am specifically focusing on the "patterns" option and encountering difficulties while trying to create a regex expression for capturing 1 or 2 digits with an optional decimal place. Acceptable inputs: ...

javascriptjqueryregexformatter

Stop Bootstrap popover from being displayed before it is hidden using .hide()

I am attempting to control the display of a popover based on a certain condition. <form class="submit-form" action="{% url 'search' %}" method="post"> {% csrf_token %} ...

javascriptjquerytwitter-bootstrapbootstrap-5

Obtain the Encoded Data

Unfortunately, I do not have control over domain.com. However, I am able to provide a redirect URL parameter like the one shown below: www.domain.com?retUrl=www.example.com%3Fparameter%3Dvalue Following the provision of retURL (www.example.com?parameter= ...

javascripthtmlsalesforceapex-codeurldecode

Creating a website layout using DIV elements that adjusts the background and buttons based on the screen

I'm currently tackling a straightforward HTML page but facing some challenges with the divs. The goal is to have a fullscreen background with four horizontal buttons aligned next to each other at the bottom. These buttons are currently linked to the b ...

htmlcssbackgroundcss-position

Validate if the Jquery AJAX response contains any data

I've been attempting to integrate an alert message in my code that triggers if the response is null, but every time I try to do so, something goes wrong. If anyone has any suggestions or assistance with this issue, it would be greatly appreciated. He ...

javascriptjqueryajax

Tips for preserving the integrity of square brackets while extracting data from JSON

Everyone: We've decided to utilize Newtonsoft JSON.NET for serializing some C# POCOs, and here's what we have: { "RouteID": "123321213312", "DriverName": "JohnDoe", "Shift": "Night", "ItineraryCoordinates": [ [ 9393, 44 ...

javascriptjqueryjsonserializationjson.net

What could be causing the inability of select:-moz-focusring to eliminate the dotted lines in the Firefox browser on this bootstrap navigation

Is there a way to remove the Firefox dotted lines from my bootstrap navigation bar? I've come across suggestions to add the following code snippet to the CSS file: a:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; ...

cssangularjstwitter-bootstrapfirefox

Using jQuery to refresh a div element

I am struggling with updating the "right" div in my jsp page using the script below. Despite being contained in a single file, the update does not seem to work. Any assistance is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

javascriptjqueryhtmlcss

Unable to removeClass and addClass as expected

Each time I click on a div, it gets encased in a black line. However, my goal is for the previously selected div to lose the black outline whenever I click on a different div. Only the current div should have the border. Below is the code snippet that I a ...

javascriptjqueryhtml

How come my container-fluid div isn't encompassing the box divs too?

I am currently in the process of creating a dice using the bootstrap grid system. Although I have not completed it yet, here is a small snippet of the code that showcases my progress. However, when I inspect my webpage using developer tools (see attached i ...

htmlcssbootstrap-5

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

For my Amazon.es web scraper built with Selenium, I am using a CSS selector to determine the total number of pages it will iterate through. However, the selector name seems to change dynamically and I must update it daily. As someone not well-versed in H ...

pythonhtmlcssseleniumweb-scraping

Discovering the Secrets of Accessing and Modifying Item Values in BIRT

Is it feasible to create using only Javascript without utilizing any Java functions? Is there a way to access values from elements like labels, tables, or charts by calling them from an HTML button? I am currently working with Openlayers and BIRT. I need ...

javascripthtmlbirt

When using JavaScript to style.display = "block", the Bootstrap-4 column layout may experience a display break

My div is initially displaying properly in one row at the beginning. However, when the user changes the select option to "b" and then back to "a," the display breaks. The two texts "my left side text" and "my right text" are displayed on two lines, one be ...

javascripthtmljquerybootstrap-4

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

While attempting to disable a button in Materialize CSS using jQuery, I encountered an issue. Despite following the documentation found here, it seems that simply adding the 'disabled' class does not automatically disable the button as expected. ...

javascriptjqueryhtmlcssmaterialize

Encountered a SassC error during assets precompile with Rails and Metronic due to insufficient space

After developing a Rails app with Bootstrap, I decided to enhance the styles using Metronic. However, I encountered an issue when trying to compile assets in production mode: rake aborted! SassC::SyntaxError: Internal Error: Not enough space /hom ...

ruby-on-railssassbootstrap-4metronic

Setting an AJAX response as the value of a modal form

One of the functionalities on my website involves a button that, when clicked, triggers the opening of a modal form and sends an ajax request to a php page. This request includes an id from a specific table in the database. The php page then retrieves a ...

phpjqueryajaxbootstrap-modal

Using Bootstrap to create a floating image amidst surrounding elements

<div id="wrapper"> <div class="row"> <div class="col-sm-6 col-xs-12 image">Image</div> <div class="col-sm-6 col-xs-12 title">Title</div> <div class="col-sm-6 col-xs-12 description"> Desc ...

jqueryhtmlcsstwitter-bootstrapcss-float

The JSON object returned by the Ajax call is undefined: object

Despite my best efforts, the JSON value either returns as unidentified or doesn't display at all Below is the PHP code: $index=0; while($row = $result->fetch_array()){ $index++; $data=array( array( $index=>$row[ ...

phpjqueryjsonajaxmysqli