Блог

Главная - Вопросы по программированию - Scrollspy вообще не работает — пункты меню не выделяются

Scrollspy вообще не работает — пункты меню не выделяются

#css #django #bootstrap-4 #scrollspy

Вопрос:

Я начну с того, что скажу, что я полный новичок в HTML, начальной загрузке и CSS — я начал всего несколько дней назад.

Ни за что на свете я не могу заставить Scrollspy работать. Я знаю, что этот вопрос задавался много раз, и я потратил часы, просматривая решения, но я не нашел того, что работает для меня.

Ниже приведено начало моего HTML-кода, вплоть до моей навигации:

 {% load static %}

<!doctype html>
    <html lang="en" class="h-100">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Steven Cunden | Home</title>

        <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/cover/">

        <!-- Bootstrap core CSS -->
        <link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

        <style type="text/css">
        body{
            position: relative;
            overflow-y: scroll; 
        }
    </style>


    <!-- Custom styles for this template -->
    <!-- <link href="cover.css" rel="stylesheet"> -->
</head>

<section class="cover-thing first text-center">


    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" id='nb'>
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Steven Cunden</a>

            <div class="collapse navbar-collapse justify-content-end">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#test">TEST</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about-me">ABOUT ME</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#aoi">INTERESTS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills">SKILLS</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    

    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="mb-auto">
            <div>

            </div>
        </header>

        <main class="px-3" >
            <img id='profile-pic' src="{% static  'images/pp.jpg' %}">
            <hr>
            <h1 >Steven Cunden</h1>
            <p class="lead"><b>Data Scientist. NFL Enthusiast. Student</b></p>
            <ul class="social-links">
                <li><img class="social" src="{% static 'images/linkedin-w.png'%}"></li>
                <li><img class="social" src="{% static 'images/github-w.png'%}"></li>
                <li><img class="social" src="{% static 'images/gmail-w.png'%}"></li>
            </ul>
            <p class="lead" >
            </p>
        </main>

        <footer class="mt-auto text-white-50" >
            <p>Keep scrolling to find out more about me, and feel free to reach out!</a>
            </footer>
        </div>

    </section>

Я добавил тестовый пункт в меню исключительно в целях тестирования. После приведенного выше кода у меня есть раздел тела, который содержит 3 . В каждом из этих разделов соответствует один из пунктов моей навигации.

Остальная часть моего кода выглядит примерно так:

 <body  data-spy="scroll" data-target="#nb" data-offset="50">
        <hr style="border-color: white;" >

        <section class="cover-thing second" >

            <h2 class="p-3" style="text-align: center; color:#499DD0" id='test'>
                
                <b>About Me</b>

            </h2>

        </section>

После этого раздела я ожидал, что тестовый элемент моей навигационной панели загорится, как только я прокручу этот класс h2, но ничего не происходит. Остальные разделы отформатированы аналогичным образом.

Вы можете найти полный код здесь: https://jsfiddle.net/scunden/6om1ukp8/1/

Однако код там не отображается должным образом, так как я работаю с Django. Любая помощь будет очень признательна!

Метки: