Блог

Главная - Вопросы по программированию - Прокрутите, чтобы выявить проблему main.js не работает для моего раздела html?

Прокрутите, чтобы выявить проблему main.js не работает для моего раздела html?

#javascript #html #css

Вопрос:

 /*===== MENU SHOW =====*/ 
const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

    if(toggle amp;amp; nav){
        toggle.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }
}
showMenu('nav-toggle','nav-menu')

/*===== REMOVE MENU MOBILE =====*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*===== SCROLL SECTIONS ACTIVE LINK =====*/
const sections = document.querySelectorAll('section[id]')

window.addEventListener('scroll', scrollActive)

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight
        const sectionTop = current.offsetTop - 50;
        sectionId = current.getAttribute('id')

        if(scrollY > sectionTop amp;amp; scrollY <= sectionTop   sectionHeight){
            document.querySelector('.nav__menu a[href*='   sectionId   ']').classList.add('active')
        }else{
            document.querySelector('.nav__menu a[href*='   sectionId   ']').classList.remove('active')
        }
    })
}

/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
    origin: 'top',
    distance: '80px',
    duration: 2000,
    reset: true
})

/*SCROLL HOME*/
sr.reveal('.home__title', {})
sr.reveal('.home__scroll', {delay: 200})
sr.reveal('.home__img', {origin:'right', delay: 400})

/*SCROLL ABOUT*/
sr.reveal('.about__img', {delay: 500})
sr.reveal('.about__subtitle', {delay: 300})
sr.reveal('.about__profession', {delay: 400})
sr.reveal('.about__text', {delay: 500})
sr.reveal('.about__social-icon', {delay: 600, interval: 200})

/*SCROLL SKILLS*/
sr.reveal('.skills__subtitle', {})
sr.reveal('.skills__name', {distance: '20px', delay: 50, interval: 100})
sr.reveal('.skills__img', {delay: 400})

/*SCROLL PORTFOLIO*/
sr.reveal('.portfolio__img', {interval: 200})

/*SCROLL CONTACT*/
sr.reveal('.contact__subtitle', {})
sr.reveal('.contact__text', {interval: 200})
sr.reveal('.contact__input', {delay: 400})
sr.reveal('.contact__button', {delay: 600})
sr.reveal('.cv__button', {delay: 600})


/* SCROLL CV */
sr.reveal('.cv__button', {delay: 600});

У меня есть проблема в моем HTML-коде, когда он не работает при прокрутке вниз для последнего раздела ( Ссылка для загрузки).

Html-код :

 
        <!-- Download link -->
        <section class="about section" id="about">
                <h2 class="section-title">Curriculum Vitae</h2>
                 <div class="d-flex justify-content-center">
                            <button type="submit" class="cv__button" href ="">CV</button>
                        </div>


            </section>


        <!--===== FOOTER =====-->
        <footer class="footer section">
            <div class="footer__container bd-grid">
                <div class="footer__data">
                    <h2 class="footer__title">Website</h2>
                    <p class="footer__text">Under copyright protection</p>
                </div>

                <div class="footer__data">
                    <h2 class="footer__title">EXPLORE</h2>
                    <ul>
                        <li><a href="#home" class="footer__link">Home</a></li>
                        <li><a href="#about" class="footer__link">About</a></li>
                        <li><a href="#skills" class="footer__link">Skills</a></li>
                        <li><a href="#portfolio" class="footer__link">Portfolio</a></li>
                        <li><a href="#Contact" class="footer__link">Contact</a></li>
                    </ul>
                </div>

                <div class="footer__data">
                    <h2 class="footer__title">FOLLOW</h2>
                    <a href="#" class="footer__social"><i class='bx bxl-facebook' ></i></a>
                    <a href="#" class="footer__social"><i class='bx bxl-instagram' ></i></a>
                    <a href="#" class="footer__social"><i class='bx bxl-twitter' ></i></a>
                </div>


            </div>
        </footer>

        <!--===== SCROLL REVEAL =====-->
        <script src="https://unpkg.com/scrollreveal"></script>

        <!--===== MAIN JS =====-->
        <script src="{% static 'assets/js/main.js' %}"></script>
    </body>
</html>

Не могли бы вы сказать мне, почему кнопка__моего резюме _ _ класса не работает для отображения прокрутки ??
и как получилось, что другие работают??
У меня есть чек, и его следует написать так ?? sr.reveal (кнопка». cv__», {задержка: 600})

Комментарии:

1. Какая система/предварительный процессор… ты пользуешься? То, что вы показали, не является чистым JS/HTML/CSS.

2. Есть ли какие-то ошибки в консоли? Это прекрасно работает в jsfiddle. Некоторые css или боковые js могут его сломать.

3. Все в порядке , теперь это работает

4. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы точно указать, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.

Метки: ,