jQuery (документ) .ready (функция () {}); не работает правильно - PullRequest
Новая
       1

jQuery (документ) .ready (функция () {}); не работает правильно

0 голосов
/ 19 марта 2020

В основном. js

jQuery(document).ready(function(){
    "use strict"
    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if(top>=60){
            $("nav").addClass('secondary');
        }
        else{
            if($("nav").hasClass('secondary')){
                $("nav").removeClass('secondary');
            }
        }
    });

});

В индексе. html

<head>
<link rel="stylesheet" href="css/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/main.js"></script>

<head>

В стиле. css

.secondary{
    background-color:#34495e;
}

Это код для изменения класса панели навигации с классом 'nav' на класс 'second', когда страница прокручивается вниз 

    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if(top>=60){
            $("nav").addClass('secondary');
        }
        else{
            if($("nav").hasClass('secondary')){
                $("nav").removeClass('secondary');
            }
        }
    });

Приведенный выше код не работает нормально внутри 

jQuery(document).ready(function(){});

но, 

jQuery(document).ready(function(){
        "use strict"
        alert("hello world");
});

работает нормально, а некоторые другие функции также отлично работают

, но некоторые функции не работают.

Может кто-нибудь помочь мне найти решение для этой проблемы

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Ваш код правильный. Проверьте значение top с помощью console.log, чтобы убедиться, что событие прокрутки запущено. В противном случае вы найдете ошибку о какой-то другой части вашего кода.

Например, это работает и также немного оптимизировано: 

$(document).ready(function() {
  "use strict";

  var $win = $(window)
  var $nav = $("nav");

  $win.scroll(function() {
    var top = $win.scrollTop();

    console.log(top);

    if (top >= 60) {
      $nav.addClass("secondary");
    } else if ($nav.hasClass("secondary")) {
      $nav.removeClass("secondary");
    }
  });
});

Демо: https://codepen.io/taseenb/pen/QWbxRvP

0 голосов
/ 19 марта 2020

Вы можете проверить, в чем заключается ошибка, в инструменте проверки браузера. Если вы нажмете «F12», появится панель «Инструменты разработчика». И нажмите «Консоль» на этой панели и проверьте, какая ошибка произошла.

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

jQuery(document).ready(function($){
    "use strict"
    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if(top>=60){
            $("nav").addClass('secondary');
        }
        else{
            if($("nav").hasClass('secondary')){
                $("nav").removeClass('secondary');
            }
        }
    });

});

Если вы можете поделиться URL своей страницы, я могу помочь вам найти ошибку и найти решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...