Изменение фона Nav Bar при прокрутке

-1

Я хочу начать с фона прозрачным, а затем для background-color: rgba(255, 255, 255, 0.6); для перехода к навигации, когда зритель начнет прокручивать вниз.Изменение фона Nav Bar при прокрутке

Это то, что у меня есть, поэтому html-страница тянет код js.

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

Это то, что у меня есть для навигатора. Я не хочу, чтобы весь navbar изменился с помощью scrolldown, только inner. Изображение logo должно оставаться прозрачным.

<nav class="navbar" > 
    <img src="images/logo.png" class="logo"> 
    <div id="inner" id="top"> 

    <ul> 
     <li><a href="index.html" title="Home">HOME</a></li> 
     <li><a href="about.html" title="About">ABOUT</a></li> 
     <li><a href="contact.html" title="Contact">CONTACT</a></li> 
    </ul> 
    </div> 
</nav>

Здесь мой css (если больше я могу опубликовать).

#inner{ 
width:140px; 
float:right; 
margin-right:5px; 
text-align:justify; 
} 
.navbar a { 
font-size: 14px; 
font-family:SinkinSansLight; 
letter-spacing:5px; 
line-height: 20px; 
border:none; 
padding: 2px ; 
text-decoration: none; 
margin-top: 10px; 
}

Наконец, мои JS, которая была просто скопировать вставленные из других тем на SO, и скорректированные с удостоверением от моего CSS.

function checkScroll(){ 
var startY = $('#inner').height() * 2; //The point where the navbar changes in px 

if($(window).scrollTop() > startY){ 
    $('#inner').addClass("scrolled"); 
}else{ 
    $('#inner').removeClass("scrolled"); 
} 
} 

if($('#inner').length > 0){ 
$(window).on("scroll load resize", function(){ 
    checkScroll(); 
}); 
}

К сожалению есть так много, я просто вижу много людей требуется больше кода, чем в комплект поставки, и я пытался несколько вариантов с JS. Спасибо за помощь!

источник

2016-12-04 Victoria

Пожалуйста, пост все CSS, относящуюся к вашему avbar, а также прокручивать класса тоже. –

ваш «внутренний» элемент имеет два идентификатора? это недопустимый html, элемент должен иметь только один уникальный идентификатор. – Punit

Я действительно не понимаю, что вы здесь просите, и ваш код должен работать правильно. Класс '. Scrolled' должен быть добавлен в' # inner', когда пользователь прокручивается вниз. – Punit

Редактировать: Найдены проблемы. Вы пытаетесь использовать jQuery, но не включили его в страницу. Поместите jQuery на свой сайт.

Я не совсем уверен, что вы спрашиваете, потому что код jQuery, который вы опубликовали, отлично работает ... Он добавляет класс scrolled в #inner, когда пользователь прокручивает.

Вот фрагмент кода. Я добавил переход на #inner и цвет фона до #inner.scrolled и установил высоту на корпусе, чтобы вы могли прокручивать и видеть, как она работает.

function checkScroll() { 
 
    var startY = $('#inner').height() * 2; //The point where the navbar changes in px 
 

 
    if ($(window).scrollTop() > startY) { 
 
    $('#inner').addClass("scrolled"); 
 
    } else { 
 
    $('#inner').removeClass("scrolled"); 
 
    } 
 
} 
 

 
if ($('#inner').length > 0) { 
 
    $(window).on("scroll load resize", function() { 
 
    checkScroll(); 
 
    }); 
 
}

body { 
 
    height: 1000px; 
 
} 
 
#inner { 
 
    width: 140px; 
 
    float: right; 
 
    margin-right: 5px; 
 
    text-align: justify; 
 
    position: fixed; 
 
    transition: background-color 1s; 
 
} 
 
#inner.scrolled { 
 
    background-color: rgba(255, 0, 0, 0.6); 
 
} 
 
.navbar a { 
 
    font-size: 14px; 
 
    font-family: SinkinSansLight; 
 
    letter-spacing: 5px; 
 
    line-height: 20px; 
 
    border: none; 
 
    padding: 2px; 
 
    text-decoration: none; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar"> 
 
    <img src="images/logo.png" class="logo"> 
 
    <div id="inner"> 
 
    <ul> 
 
     <li><a href="index.html" title="Home">HOME</a> 
 
     </li> 
 
     <li><a href="about.html" title="About">ABOUT</a> 
 
     </li> 
 
     <li><a href="contact.html" title="Contact">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

источник

2016-12-04 19:45:51 Punit

У моего css есть тело, установленное на 'height: 100%;' поэтому должно ли это работать? Я не уверен, что происходит. Веб-сайт, который я пытаюсь реализовать, это tresart.net. Если мой код является точным, может ли страница не тянуть файл .js правильно? – Victoria

Изменение фона Nav Bar при прокрутке

ответ

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