Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

HTML Bootstrap 3 not adding active class to UL LI

Tags:

html

jquery

css

twitter-bootstrap

Im trying to use scroll-spy to add an active class to the ul li on a one page scroll and sticky nav, for some unknown reason i cant get this work with-in my project. Below is the layout of my menu:

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
    <div class="container_full height">
        <div class="navbar-header page-scroll height">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="logo-holder">
            <img class="" src="img/logo-p.png"/>
            <span>
                <a class="page-scroll" href="#home-page">xxxxxx</a>
                <i>xxxxxxx</i>
            </span>
            </div> 
        </div>  
        <div class="collapse navbar-collapse navbar-ex1-collapse height">
            <ul class="nav navbar-nav height">
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#home-page">item1</a>
                </li>
                <li>
                    <a class="page-scroll" href="#item2">item2</a>
                </li>                   
                <li>
                    <a class="page-scroll" href="#item3">item3</a>
                </li>

                <li>
                    <a class="page-scroll" href="#item4">item4</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->  
    <div id="home-page" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            //many divs css parallax--

The nav js file is below:

 $('.parallax').scroll(function() {

if ($('.parallax').scrollTop() > 100) { 
    $(".navbar-fixed-top").addClass("top-nav-collapse");
    $(".my-nav").addClass("nav-resize");



} else {

    $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $(".my-nav").removeClass("nav-resize");
    $(".moveLogo").removeClass("moveLogo-resize");
}
});


$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    var position =  $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;

    $('html,body,.parallax').stop().animate({
        scrollTop: position
    }, 1500, 'easeInOutExpo');

    event.preventDefault();
   });
});

If i was to use the above method without the parallax divs etc this will work with no problems but at the moment the li class is active always on the last li item when scrolling down the page.

enter image description here

green = scroll-able content inside parent container" Blue ", green divs are to target id's.

 .blue{
    height:100%;
    width:100%;
    overflow:hidden;

 }

 .green // Has many divs

I tried the obvious to target the green > divs but it doesn't seem to work.

like image 592
Careen Avatar asked Aug 24 '15 01:08

Careen

People also ask

How do I click on Li active?

on('click','li',function(){ $(this). addClass("active"); // adding active class }); The above code will add the active class to the li tag whenever the user clicks on the Li element.

How do I add active class to a navigation menu?

To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.

What is class active bootstrap?

The active class is applied to the navigation element the user is currently viewing. In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in.

Video Answer

1 Answers

Your code didn't give enough to go off of, so I added a series of divs that are 1000px tall and have different background colors - all of which corresponded to the IDs in your nav menu - scroll spy is working. Perhaps you just didn't have enough content to scroll or were implementing the IDs incorrectly?

Note that I'm also using recent versions of Bootstrap and jQuery...

Check the fiddle 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>


<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
    <div class="container_full height">
        <div class="navbar-header page-scroll height">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="logo-holder">

            <span>
                <a class="page-scroll" href="#home-page">xxxxxx</a>
                <i>xxxxxxx</i>
            </span>
            </div> 
        </div>  
        <div class="collapse navbar-collapse navbar-ex1-collapse height">
            <ul class="nav navbar-nav height">
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#home-page">item1</a>
                </li>
                <li>
                    <a class="page-scroll" href="#item2">item2</a>
                </li>                   
                <li>
                    <a class="page-scroll" href="#item3">item3</a>
                </li>

                <li>
                    <a class="page-scroll" href="#item4">item4</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->  
    <div id="home-page" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:pink"></div>
        </div>
    </div>

    <div id="item2" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:red"></div>
        </div>
    </div>

    <div id="item3" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:green"></div>
        </div>
    </div>


        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>

</script>
    </body>
</html>
like image 116
timgavin Avatar answered Oct 15 '22 09:10

timgavin
Sign in to Comment

Related questions

How to transfer all the handlers from one deferred to another?
Passing form data and file to php using ajax [duplicate]
gridster, how to auto fit to browser size change?
Hiding empty elements on page load, but not afterwards using knockout.js
Making jQuery.ajax request through a proxy server
how to download a file on Chrome without auto renaming file to "download"?
Using ajax to send a Proto-buf message to a Java server
Random path generation algorithm
jquery bxslider is not working with templates inside ng view
Jquery masked Input v1.4 issue with Samsung Android device
Calculating the maximum/minimum height of a DIV element
Dynamic Javascript sourced data - DataTable
Detect dead scrolling at the bottom of the page (mousewheel, scroll events)
JQuery validation message appearing weirdly between two radio buttons
Complex continuous scroll loop
Website doesn't load properly in Safari browser
Reduce AJAX request size. Simple chat with Polling system
Prevent NoUISlider tooltips from overlapping
AngularJS, D3 and JQuery in the same page. D3 can't read the correct DOM dimensions
Call Function After Event Listener Completes - Javascript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!