2017-02-16 9 views
0
.

. Я пытаюсь создать фиксированную навигационную панель, которая прозрачна на самой верхней части моей страницы, и белый, как только пользователь прокручивает. У меня есть код, который работает ALMOST - это нормально в 90% случаев, но если пользователь обновляет страницу где-нибудь, кроме самого верхнего, навигационная панель начнет прозрачно в тот момент на странице, а не будет белой. (Он все еще меняется на свиток).jQuery - изменение цвета в Navbar при работе с прокруткой. UNLESS пользователь обновляет страницу на полпути вниз.

Я хочу, чтобы навигационная панель всегда была белой, если она не находится на самой верхней части страницы. Вот мой код:

$(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('.nav'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $('.brand-centered').css('background-color', 'rgba(255, 255, 255, 0.9)'); 

    } else { 
     $('.brand-centered').css('background-color', 'transparent'); 


    } 
}); 
}); 
     ` 

ответ

0

Вы можете попробовать что-то другое, как это, так что в этом алгоритме вы собираетесь тест 280, если это работает, то вы можете использовать 100 или меньше

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 
and it will work cross-browser. Cheers! 

var myNav = document.getElementById("nav"); 

window.onscroll = function() { 
    "use strict"; 
    if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 
    myNav.classList.add("scroll"); 
    } else { 
    myNav.classList.remove("scroll"); 
    } 
}; 
Смежные вопросы