2016-10-01 14 views
1

Я просто сделал это путь с чистым JavaScript, чтобы изменить NavBar цвета после прокрутки, он работал с Google Chrome без каких-либо проблем , но когда я попытался проверить его на светлячок он не работает с ним.Изменения Navbar цвет при прокрутке

Любой может дать мне совет по этому поводу? Спасибо заранее.

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

 
window.onscroll = function() { 
 
    "use strict"; 
 
    if (document.body.scrollTop >= 280) { 
 
     myNav.classList.add("scroll"); 
 
    } else { 
 
     myNav.classList.remove("scroll"); 
 
    } 
 
};
body { 
 
    margin:0; 
 
    padding:0; 
 
    height:4000px; 
 
    } 
 
.nav { 
 
    position:fixed; 
 
    width:100%; 
 
    height:60px; 
 
    background-color:#111; 
 
    transition:all .5s ease-in-out; 
 
    } 
 
.scroll { 
 
    background-color:transparent; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

ответ

2

Если вы используете чистый JavaScript:

Firefox и IE имеет переполнение в html в то время как Chrome, Safari и Opera помещает его на body уровне:

Смотрите here для получения дополнительной информации:

вар тела = document.body; // Для Chrome, Safari и Opera

var html = document.documentElement; // Firefox и IE помещают переполнение на уровне , если не указано иное. Таким образом, мы используем свойство documentElement для этих двух браузеров

Таким образом, вы должны использовать это:

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 

и он будет работать кросс-браузер. Ура!

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"); 
 
    } 
 
};
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 4000px; 
 
} 
 
.nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #111; 
 
    transition: all .5s ease-in-out; 
 
} 
 
.scroll { 
 
    background-color: transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

Если вы используете JQuery:

var myNav = $("#nav"); 
 

 
$(window).on('scroll', function() { 
 
    "use strict"; 
 
    if ($(window).scrollTop() >= 280) { 
 
    myNav.addClass("scroll"); 
 
    } else { 
 
    myNav.removeClass("scroll"); 
 
    } 
 
});
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 4000px; 
 
} 
 
.nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #111; 
 
    transition: all .5s ease-in-out; 
 
} 
 
.scroll { 
 
    background-color: transparent; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

+1

@YahyaEssam см. здесь параметры javascript и jquery ... Спасибо! – kukkuz

+1

Это очень новая информация для меня о переполнении браузеров. Большое спасибо –

+0

приветствую :) – kukkuz

1
$(window).scroll(function() { 
if ($(this).scrollTop() > 20){ 
    $('#navBar').css({property: "value"}); 
    } else { 
     $('#navBar').css({property: "value"}); 
    } 
}); 

Не совсем ответ, но это работает для меня во всех браузерах, которые я проверил на (то есть край, сафари, хром & светлячок)

1

Попробуйте это. Измените «280» на количество пикселей, которые вы хотите прокрутить, до того, как цвет фона навигатора изменится на прозрачный.

HTML:

<div id="navbar"></div> 

JavaScript:

$(function() { 
$(window).on("scroll", function() { 
    if($(window).scrollTop() > 280) { 
     //background on scroll 
     $("#navbar").addClass("scroll"); 
    } else { 
     //background at top 
     $("#navbar").removeClass("scroll"); 
    } 
    }); 
}); 

CSS:

#navbar { 
background-color:#111; 
transition:all .5s ease-in-out; 
} 
.scroll { 
background-color:transparent; 
} 
+0

работал со мной спасибо, но я искал Чистый JavaScript код не JQuery. –

+1

Жаль об этом! У kukkuz есть работающая чистая реализация JS: http: // stackoverflow.com/a/39802504/4411240 – HTML