Моя тень в нижнем ящике не работает при прокрутке вниз

Я пытаюсь добавить тень ящика к фиксированному заголовку при прокрутке вниз. Не уверен, что я делаю неправильно, но он не работает. Вот мой код:Моя тень в нижнем ящике не работает при прокрутке вниз

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <i class="fa fa-bars"></i> 
      </button> 
      <a href="http://www.aspentech.com/" class="navbar-brand"> 
       <img class="img-responsive" src="img/[email protected]"> 
      </a> 
     </div> 
     <div class="login"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"> 
        <a id="loginLink" href="#" class="navbar-text navbar-icon-link"> 
        <span class="navbar-profile-icon center-block"></span>Hello, Sijie!</a> 
        </li> 
       </ul> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav subnav-nav"> 
       <li class="subnav"> 
        <span class="navbar-text subnav-link" id="subnav-link-1"><a class="sub" href="index.html">aspenOne Update Center</a></span> 
       </li> 
       <li class="subnav"> 
        <span class="navbar-text subnav-link activated" id="subnav-link-2"><a class="sub activated" href="download center.html">aspenOne Download Center</a></span> 
       </li> 
       </ul> 
     </div> 
     </div> 
    </nav>

Мой код здесь: http://jsfiddle.net/Swathi56/dojcr29w/ Вот скриншот ошибки я получаю из консоли Chrome.

источник

2015-08-31 Sijie Wang

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

Я добавил остальную часть HTML. –

В CSS вместо

.navbar-default .active { 
     box-shadow: 0 6px 4px -4px rgba(0,0,0,.3); 

    }

сделать это

.active { 
     box-shadow: 0 6px 4px -4px rgba(0,0,0,.3); 
    }

источник

2015-08-31 21:56:15 jakob

Я сделал это, все еще не работая, на моей консоли Chrome, он говорит мне, что $ в js-файле не определен. –

в jsfiddle вам следует выбрать библиотеку jquery .. в настоящее время у вас есть чистый js .. вы можете видеть, что выбрать в верхнем левом углу – jakob

Я не знаю, какую библиотеку jquery выбрать. –

Во-первых, если вы хотите, чтобы нацеливать свои .navbar-default что имеет .active класс с помощью CSS, вы должны сделать это следующим образом:

.navbar-default.active {}

Теперь ваш CSS должен выглядеть следующим образом: после добавления position:fixed;

.navbar-default.active { 
    box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .3); 
    position:fixed; 
}

См the Fiddle

Просто, чтобы ваш СЧА от прыжков каждый раз, когда фиксированное положение включено/выключено, я просто добавить >= в если заявление:

if (scroll >= 0) { 
    $(".navbar-default").addClass("active"); 
} else { 
    $(".navbar-default").removeClass("active"); 
}

Как упоминалось Sijie Wang, чтобы предотвратить ошибки в консоли, вы должны включить библиотеку jQuery в свою скрипку.

источник

2015-09-01 14:51:06 EdenSource

Моя тень в нижнем ящике не работает при прокрутке вниз

ответ

Смежные вопросы