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
});
});
최고에 클래스
.full-header
에 대한z-index
라인을 제거하여이 문제를 해결할 수 있습니다! 누가 그렇게 쉽게 생각했을까요?! –감사합니다. ! –
하하 CSS의 기쁨, 내가 도울 수있어서 기쁘지 않다. 그런데 사이트 디자인이 마음에 듭니다! –