在 Safari 中滚动时，粘性菜单栏“跳跃”/闪烁

Posted 2023-02-16

【中文标题】在 Safari 中滚动时，粘性菜单栏“跳跃”/闪烁

【英文标题】：Sticky menu bar "jumps"/flicker while scrolling in Safari

【发布时间】：2013-03-30 05:53:05

【问题描述】：

我的粘性菜单栏出现问题，在 Safari 中滚动时似乎会跳跃/闪烁。 我已经用谷歌搜索了，但对我来说似乎很复杂，所以也许你可以帮助我？

网址是：http://12hrs.net

我的 Jquery 看起来像这样：

jQuery(document).ready(function ($)

$(".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(window).load(function()

 jQuery(".mainSlider").flexslider(
    animation: "slide",
    animationLoop: true,
    directionNav: false,
    controlNav: true
);

);

【参考方案1】：

实际上，您可以通过在 layout.css 中删除班级 .full-header 的 z-index 行来解决此问题

【讨论】：

太棒了！！谁会想到这么简单？！

哈哈 css 的乐趣，不用担心很高兴我能帮上忙。顺便说一句，我喜欢你网站的设计！

谢谢你！我仍在努力，但它正在慢慢形成！