Sticky banner not working

Я пытаюсь получить липкий баннер на моей веб-странице, но я столкнулся с некоторыми проблемами. Я думаю, что знаю, в чем проблема, но я не знаю, как ее решить.Sticky banner not working

Это JQuery кодирования для липкого баннера:

$(window).scroll(function() { 
if($(this).scrollTop() > 175) { 
    nav ul.addClass("main-nav-scrolled"); 
} 
else { 
    nav ul.removeClass("main-nav-scrolled"); 
} 
});

И это CSS кодирование, которое использует мое меню навигации:

.nav ul { 
    list-style: none; 
    background-color: #10bbb6; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

.nav li { 
    font-family: 'Oswald', sans-serif; 
    font-size: 1.2em; 
    line-height: 30px; 
    height: 30px; 
} 

.nav a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    transition: .3s background-color; 
} 

.nav a:hover { 
    background-color: #088783; 
} 

.nav a.active { 
    background-color: #fff; 
    color: #088783; 
    cursor: default; 
    font-weight: bold; 
} 

    .nav li { 
    width: 110px; 
    border-bottom: none; 
    height: 40px; 
    line-height: 40px; 
    font-size: 1.2em; 
    } 

    .nav li { 
    display: inline-block; 
    margin-right: -4px; 
    }

Я совершенно новой концепции JQuery, и я провел много исследований, но ничего, что могло бы решить мою проблему. Я думаю, что в кодировке jQery «nav ul» не распознается.

nav ul.addClass("main-nav-scrolled");

Я также попытался

nav.addClass("main-nav-scrolled");

Но это не сработало.

Другие теги важно CSS являются:

.main-nav-scrolled {position: fixed; 
    top:0;} 
    #top { position: fixed; 
    top:0; 
    z-index: -1; 
    width: 100% 
    } 

#bottom { 
    position: relative; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background-color: #10bbb6; 
    overflow: scroll; 
} 

#bottom, 
#top { position: relative; }

И это, как она расположена в теле:

<body class="news"> 

<div id="top"> 
<a href="Homepage.html"><IMG STYLE="position:absolute; TOP:10px; LEFT:125px; WIDTH:150px; HEIGHT:150px" SRC="afbeeldingen/kledingbank2.jpg"></a> 

<div class="banner"> Kledingbank Zaltbommel, voor iedereen. </div> 
</div> 

    <header> 

    <div class="nav"> 
     <ul> 
     <li class="Home"><a href="Homepage.html">Homepage</a></li> 
     <li class="Home"><a href="Over ons.html">Over ons</a></li> 
     <li class="tutorials"><a href="Sponsoren.html">Sponsoren</a></li> 
     <li class="about"><a href="Kleding.html">Kleding</a></li> 
     <li class="about"><a href="Vacaturen.html">Vacaturen</a></li> 
     <li class="news"><a class="active" href="Contact.html">Contact</a></li> 

     </ul> 
    </div> 
    </header> 

    <div id="bottom"> 
<BR> 

<div class="link"> 
<center><p> Er is nog steeds veel vraag naar vrijwilligers! Heeft u interesse in het zijn van vrijwilliger bij de kledingbank, aarzel dan niet. 
Stuur een mail naar <a href="mailto:[email protected]"> Kledingbank Zaltbommel</a> en wij nemen verder contact met u op! </center></p> 
</div>

источник

2016-02-09 G. Man

Изменение СЧА ul.addClass до $ ("ul.nav") addClass, и, конечно, также изменения он для класса удаления –

дает идентификатор вашему навигатору, тогда вы можете позвонить как $ ("# ID ul"). addClass (""); –

Anoop LL вот что я думаю о проблеме. Как дать идентификатор nav в css? –

Как уже упоминались в других ответах, ваш Jquery не имеет элемента, определенный в качестве ссылки в первой очереди. Таким образом, nav ul.addClass() ничего не сделал, потому что не было объекта jQuery, созданного для соответствия этой ссылке.

Дальнейший просмотр вашей разметки, я хотел бы ссылаться на элемент header, чтобы добавить ваш липкий класс вместо неупорядоченного списка, так как header является родительским элементом меню.

Таким образом, вы бы этот сценарий (желательно до закрытия </body> тега):.

<script type="text/javascript> 
$(window).scroll(function() { 
    var nav = $('header'); 

    if($(this).scrollTop() > 175) { 
    nav.addClass("main-nav-scrolled"); 
    } 
    else { 
    nav.removeClass("main-nav-scrolled"); 
    } 
}); 
</script>

источник

2016-02-09 15:04:14 CreMedian

Я попытался изменить его, но это не сработало. Липкий баннер не работает. –

Является ли класс добавлен в 'header', используя мой сценарий выше? Попробуйте просмотреть страницу с помощью инспектора элементов для проверки – CreMedian

Это не похоже, что класс добавляется в заголовок. –

Вы должны выбрать пункт в Jquery первой так:

Это

nav ul.addClass("main-nav-scrolled");

должна быть этой

$(".nav ul").addClass("main-nav-scrolled");

источник

2016-02-09 14:38:10

будет ли разница в написании: $ ("ul.nav") ?? Вот где мой мозг пошел первым - просто хочу быть уверенным, что ничего не пропало. –

Я изменил его, но мой липкий баннер все еще не работает. Баннер просто не придерживается верхней части страницы. –

На основе вашего CSS у вас есть 'ul' как дочерний элемент' .nav', поэтому '$ (" ul.nav ")' будет неверным. –

Sticky banner not working

ответ

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