我的粘性菜单栏有问题，在 Safari 中滚动时似乎会跳跃/闪烁。 我已经用谷歌搜索过，但对我来说似乎很复杂，所以也许你可以帮助我？
网站是:http://12hrs.net
我的 Jquery 看起来像这样:
jQuery(文档).ready(函数($) {
$(".full-header").sticky({
topSpacing: 0,
wrapperClassName: 'full-header'
});
$('.image-wrapper').hover(function(){
$(this).find('.mouse-effect').stop().animate({'opacity':'0.6'});
$(this).find('.extra-links').stop().animate({'top':'64%'});
},function(){
$(this).find('.mouse-effect').stop().animate({'opacity':'0'});
$(this).find('.extra-links').stop().animate({'top':'-64%'});
});
$("li[data-id='id-166'] a.go-link").remove();
$(".gallery-option a").click(function (event) {
event.preventDefault();
var view = $(this).attr("id");
if (view == "three") {
$(".holder li").removeClass("four columns").addClass("one-third column");
if ($data) {
$("ul.holder").removeAttr("style");
$data.find("li").removeClass("four columns").addClass("one-third column")
}
} else {
$(".holder li").removeClass("one-third column").addClass("four columns");
if ($data) {
$("ul.holder").removeAttr("style");
$data.find("li").removeClass("one-third column").addClass("four columns")
}
}
});
$("a[rel^='prettyPhoto']").prettyPhoto();
$(".ads img").addClass("img-frame");
$('#main-menu li a').click(function(e){
e.preventDefault();
var content = $(this).attr('href');
var checkURL = content.match(/^#([^\/]+)$/i);
if(checkURL){
var goPosition = $(content).offset().top - 80;
$('html,body').animate({ scrollTop: goPosition}, 'slow');
}else{
window.location = content;
}
});
$("#main-menu li").click(function () {
$("#main-menu li").removeClass("active");
$(this).addClass("active")
});
$(".filter li a").click(function (event) {
event.preventDefault();
var test = $(this).parent().attr("class");
$(".filter li a").removeClass("main-btn").addClass("gray");
$(this).removeClass("gray").addClass("main-btn");
});
$("#foot a").click(function () {
$("#menu li").removeClass("active");
$("#menu li:first").addClass("active")
});
var $filterType = $("#filterOptions li.active a").attr("rel");
var $holder = $("ul.holder");
var $data = $holder.clone();
$("#filterOptions li a").click(function (e) {
$("#filterOptions li").removeClass("active");
var $filterType = $(this).attr("rel");
$(this).parent().addClass("active");
if ($filterType == "all") var $filteredData = $data.find("li");
else var $filteredData = $data.find("li[data-type~=" + $filterType + "]");
$holder.quicksand($filteredData, {
duration: 800,
easing: "easeInOutQuad"
}, function () {
$("a[rel^='prettyPhoto']").prettyPhoto();
$('.image-wrapper').hover(function(){
$(this).find('.mouse-effect').stop().animate({'opacity':'0.6'});
$(this).find('.extra-links').stop().animate({'top':'64%'});
},function(){
$(this).find('.mouse-effect').stop().animate({'opacity':'0'});
$(this).find('.extra-links').stop().animate({'top':'-64%'});
});
});
return false;
});
var lastId, topMenu = $("#main-menu"),
topMenuHeight = topMenu.outerHeight() + 500;
menuItems = topMenu.find('a');
scrollItems = menuItems.map(function () {
content = $(this).attr("href");
var checkURL = content.match(/^#([^\/]+)$/i);
if(checkURL){
var item = $($(this).attr("href"));
if (item.length) return item
}
});
$(window).scroll(function () {
var fromTop = $(this).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function () {
if ($(this).offset().top < fromTop) return this
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems.parent().removeClass("active").end().filter("[href=#" + id + "]").parent().addClass("active")
}
});
});
jQuery(窗口).load(函数() {
jQuery(".mainSlider").flexslider({
animation: "slide",
animationLoop: true,
directionNav: false,
controlNav: true
});
});
最佳答案
实际上，您可以通过删除 layout.css 中类 .full-header 的 z-index 行来解决此问题
关于jquery - 粘性菜单栏 "jumps"/在 Safari 中滚动时闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15715481/