does anyone know why this works on chrome only. it is basically a code that snaps the nav-bar into the top when you scroll down by the nav-fixed class. and the function fix_top_bar is a way to center the bar that is created.
function fix_top_bar(){
var barWidth = $('.nav-fixed').width();
$('.nav-fixed').css({ 'left' : '50%', 'margin-left' : '-' + (barWidth/2 + 20) + 'px' });
}
$('document').ready(function() {
$(window).scroll(function() {
if ($('body').scrollTop() > 112) {
$('nav').addClass('nav-fixed');
fix_top_bar();
}else{
$('.nav-fixed').css({ 'left' : '', 'margin-left' : ''});
$('nav').removeClass('nav-fixed');
}
});
fix_top_bar();
$(window).resize(function(){
fix_top_bar();
});
});
I think your problem is
$('document').ready(function() {
Try
$(document).ready(function() { // Note there is no tag <document>
if ($('html').scrollTop() > 112) {
instead of $('body').scrollTop()
works for me in Firefox.
Edit
But that doesn't work in Chrome... doh.
Another edit
Ugly, but this works in both:
var scrollTop = Math.max($('body').scrollTop(), $('html').scrollTop());
if (scrollTop > 112) {
There's gotta be a better cross-browser solution...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.