2013-03-30 5 views
2

Safari에서 스크롤하는 동안 점프/깜박임 현상이 나타나는 끈적한 메뉴 막대에 문제가 있습니다. 나는 봤는데 arround하지만 그것은 매우 복잡해 보입니다, 그래서 어쩌면 당신이 나를 도울 수 있습니까?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 
}); 

});

답변

2

당신은 실제로 당신의 layout.css

+0

최고에 클래스 .full-header에 대한 z-index 라인을 제거하여이 문제를 해결할 수 있습니다! 누가 그렇게 쉽게 생각했을까요?! –

+0

감사합니다. ! –

+0

하하 CSS의 기쁨, 내가 도울 수있어서 기쁘지 않다. 그런데 사이트 디자인이 마음에 듭니다! –

관련 문제