2013-03-30 92 views
2

我在粘貼菜單欄時出現問題,它似乎在Safari中滾動時跳/閃爍。 我已經使用了搜索引擎,但對我來說似乎非常複雜,所以也許你可以幫助我?在Safari中滾動時,粘滯菜單欄「跳躍」/閃爍

的網址是:http://12hrs.net

我的jQuery的是這樣的:

jQuery的(文件)。就緒(函數($){

$(".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 
}); 

});

回答

2

實際上,你可以通過在你的layout.css

+0

真棒去除z-index線爲您.full-header類解決這個問題!誰會認爲這很容易?! –

+0

非常感謝! ! –

+0

哈哈的css的快樂,不用擔心,我可以幫助。我喜歡你的網站的設計! –