Scrollspy is not working

Question

Scrollspy is not working

Navigation

#1 by (1 votes)

1

Good morning, I'm developing a website, and at first everything is working, however Scrollspy (Bootstrap 3.3) is not working, I followed several internet tutorials on how to apply it in a Website but I did not succeed even following them correctly. Here's a snippet of my code.

html, body { 
	font-family: 'Montserrat', sans-serif;
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	text-shadow:none;
	background:#FFF !important;
	position: relative;
}

.links-navbar{
	text-align: center;
	margin: 10px;
}
.links-navbar a {
	padding: 25px 36px;
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    text-transform: uppercase;
}
.navbar .links-navbar a:hover,
.navbar .links-navbar>.active>a,
.navbar .links-navbar a:focus {
	text-decoration: none;
	z-index: 20;
	color: var(--hoverLink);
	background-color: var(--hoverFundo);
}

<header>
  <nav id="navbar" class="navbar hidden-xs hidden-sm" style="background-color: transparent;">
    <div class="container">
      <div id="logos" class="col-md-12">
        <div class="col-md-2" style="margin-top:35px;">
          <a href="https://dalposso.com.br" target="_blank">
            <img src="images/dalposso-logo.png" class="img-responsive">
          </a>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-4" style="margin-top:35px;">
          <a href="index.php">
            <img src="images/murano-logo.png" style="width: 100%;">
          </a>
        </div>
        <div class="col-md-4 text-center" style="padding-top: 90px;">
          <a href="https://dalposso.com.br" class="link-dalposso">
            Voltar para o site
          </a>
        </div>
      </div>
    </div>
    <div id="navegacao" class="col-md-12" style="margin-top:50px; padding: 0; z-index: 20;">
        <div class="links-navbar nav">
          <a href="#emprendimento">o emprendimento</a>
          <a href="#areas">áreas comuns</a>
          <a href="#garagens">garagens</a>
          <a href="#apartamentos">apartamentos</a>
          <a href="#localizacao">localizacao</a>
          <a href="#contato">contato</a>
        </div>
    </div>
  </nav>
</header>

html css bootstrap-3

asked by anonymous 03.07.2018 / 16:18

1 answer

Atom, save without BOM How to check if the list is empty or with an element in C

score 1 · Accepted Answer

Face to ScrollSpy works you need to follow the rules established by the official documentation that you can consult here! link

Point 1: I do not know if you are using position:relative in <body> , but this is necessary for ScrollSpy to work!

Point 2:

Requires Bootstrap nav Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

In short: "You need to use the Bootstrap nav component to enable link marking" , ie you have to use Bootstrap's official NavBar and yours put in the question is totally different from the original NavBar of BS3 as you can see here: link

Here's a simple working example of ScrollSpy for you to use as a reference, notice the position: relative in Body, the link between the href of the menu and the id of sections and mainly in the construction of NavBar

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body {
            position: relative;
        }

        #section1, 
        #section2, 
        #section3  {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #1E88E5;
        }
        #section2 {
            background-color: #673ab7;
        }
        #section3 {
            background-color: #ff9800;
        }
        .navbar-inverse .navbar-nav>.active>a, 
        .navbar-inverse .navbar-nav>.active>a:focus, 
        .navbar-inverse .navbar-nav>.active>a:hover {
            color: #fff;
            background-color: red;
        }
    </style>
</head>

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

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#section1">Section 1</a>
                        </li>
                        <li>
                            <a href="#section2">Section 2</a>
                        </li>
                        <li>
                            <a href="#section3">Section 3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div id="section1" class="container-fluid">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at
            the navigation bar while scrolling!</p>
    </div>

</body>

</html>

NOTE: I left CSS in the styles you need to customize for when the Navbar item is .active