Я создал 2 одинаковых выпадающих меню в панели навигации. Если указать главное меню, автоматически отобразится подменю. А при прокрутке вниз фон подменю автоматически изменится на белый. Но это влияет только на первое подменю, подменю для второго главного меню нет. Я звоню в тот же класс, но почему CSS не относится ко второму подменю? Ниже приведен мой пример кода.

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.dropdown-menu'),
            didScroll = false,
            changeHeaderOn = 150;

    function init() {
        window.addEventListener('scroll', function (event) {
            if (!didScroll) {
                didScroll = true;
                setTimeout(scrollPage, 250);
            }
        }, false);
    }

    function scrollPage() {
        var sy = scrollY();
        if (sy >= changeHeaderOn) {
            classie.add(header, 'navbar-shrink');
            classie.add(subheader, 'navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();
<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>

Просмотрите всю страницу, чтобы увидеть меню навигации

Снимок экрана: введите описание изображения здесь введите описание изображения здесь

1
Howard Hee 17 Дек 2015 в 18:26

3 ответа

Лучший ответ

Наконец я решил это сам. Спасибо @Johannes и @Aminesrine за советы. Предыдущий код не может обрабатывать несколько элементов с одинаковым именем класса. Я просто изменил js, как показано ниже, добавив цикл для проверки, и это сработало.

var cbpAnimatedHeader = (function () {

var docElem = document.documentElement,
        header = document.querySelector('.navbar-default'),
        subheader = document.querySelectorAll('.dropdown-menu'),
        didScroll = false,
        changeHeaderOn = 150;

function init() {
    window.addEventListener('scroll', function (event) {
        if (!didScroll) {
            didScroll = true;
            setTimeout(scrollPage, 250);
        }
    }, false);
}

function scrollPage() {
    var sy = scrollY();
    if (sy >= changeHeaderOn) {
        classie.add(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.add(subheader[i], 'navbar-shrink');
        }
    } else {
        classie.remove(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.remove(subheader[i], 'navbar-shrink');
        }
    }
    didScroll = false;
}

function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();
0
Howard Hee 18 Дек 2015 в 09:07

Javascript не добавляет класс navbar-shrink ко второму .dropdown-menu определенно является причиной.

Если вы можете получить доступ и изменить скрипт, который вы цитировали в вопросе, попробуйте изменить эту строку

subheader = document.querySelector('.dropdown-menu'),

К этому:

subheader = document.getElementsByClassName('dropdown-menu'),
1
Johannes 17 Дек 2015 в 17:26

Этот стиль

.navbar-default .nav-justified li {
background-color: rgba(255,255,255,0.5);
}

Правильно применяется к двум подменю, только первое подменю имеет дополнительный стиль:

@media (min-width: 768px)
.dropdown-menu.navbar-shrink {
background-color: #fff;
margin: 0;
}

Если вы удалите белый фон из этого стиля, вы заметите, что подменю 2 получит тот же стиль.
Первое подменю ul имеет дополнительный класс navbar-shrink.

изменить:

Итак, вы хотите, чтобы класс navbar-shrink был добавлен в 2 подменю, проблема в коде js, вы можете заменить

classie.add(header, 'navbar-shrink');

С участием

$('.dropdown-menu').addClass('navbar-shrink');

Наверное

header = document.querySelector('.navbar-default');
classie.add(header, 'navbar-shrink');

Выбирает только первое вхождение класса, а не все вхождения класса.

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.dropdown-menu'),
            didScroll = false,
            changeHeaderOn = 150;

    function init() {
        window.addEventListener('scroll', function (event) {
            if (!didScroll) {
                didScroll = true;
                setTimeout(scrollPage, 250);
            }
        }, false);
    }

    function scrollPage() {
        var sy = scrollY();
        if (sy >= changeHeaderOn) {
            classie.add(header, 'navbar-shrink');
            $('.dropdown-menu').addClass('navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();
<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>
1
Aminesrine 18 Дек 2015 в 08:05