Question

http://designobvio.us/DoUs/directPro.html

jQuery脚本

$(window).scroll(function() {
$('#nav').css('top', $(this).scrollTop() + "px");
});

HTML

<nav id="nav" class="grid_2">    
  <ul>
    <li><a href="#"><span>↗</span>Portfolio</a></li>
    <li><a href="#">Blog</a></li>

    <li><a href="#">About Me</a></li>
    <li>
        <ul class="secondaryUL">
           <li><a href="#">business</a></li>
           <li><a href="#">skills</a></li>
           <li><a href="#">service</a></li>
        </ul>

    </li>
    <li><a href="#">me</a></li>
    <li><a href="#">contact</a></li>
 </ul>    
</nav>

关于如何修复IE和Chrome中的闪烁的任何线索..它在FF中看起来很好，甚至没有Safari可以测试。 http://designobvio.us/DoUs/directPro.html

我正在使用jQuery所以我不必调整所有的CSS来做这个调整。任何人都有任何关于如何有效地完成这种方法并在语法上清洁的想法？

Answer 1

我认为在javascript中无法令人满意地完成任务。在大多数浏览器中，你总会得到一个闪烁。我上次尝试时做的是使用position:fixed.

Answer 2

尝试使用动画。也许这会有所帮助。

$(window).scroll(function() {
    $('#nav').animate({top: $(this).scrollTop()}, 100);
});

我没有对此进行测试，因此可能会也可能不会。我将持续时间设置为100，但您可能还希望使用持续时间来获得更平滑的效果。

jQuery固定位置滚动闪烁修复？

2 个答案: