Question

我写了一个脚本来检测我什么时候到达导航栏的div元素，然后我将它的css更改为固定位置和前0位，这样它就会固定到顶部，这个问题是它没有做到的这就像滚动到顶部，它跳转到屏幕的开头。（这是闪烁的）

的Javascript

        var currentScrollTop = 0;
        var barMenuOriginalTopPos = $('#navigation').offset().top;
        console.log('original:' + barMenuOriginalTopPos);
        $(window).scroll(function() {

            currentScrollTop = $(window).scrollTop();
            console.log(currentScrollTop);
            if(currentScrollTop >= barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') == false){
                $('#navigation').addClass('fixElementToTop');
            }
            else if(currentScrollTop < barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') ){
                $('#navigation').removeClass('fixElementToTop');
            }
        });

CSS

.fixElementToTop { position: fixed; top:0; z-index:100;}

为什么

Answer 1

这是一个通过jQuery插件的非闪烁解决方案：

$(document).ready(function() {
    $('#fixedElement').scrollToFixed({ marginTop: 0 });
});

实例：http://bigspotteddog.github.com/ScrollToFixed/
插件的网站：https://github.com/bigspotteddog/ScrollToFixed/

Answer 2

屏幕顶部的css固定栏

<div style="position:fixed;top:10px;left:10px">Nav bar</div>

修改：

抱歉，我不明白你的初步问题，在这里，为了避免它轻弹你应该用固定位置启动对象，让我们说：

<div style="height:120px">XXX</div>
<div id="navigation" style="position: fixed; top:120; z-index:100;">Navigation</div>
<div class="win" style="border: 1px solid; height: 900px;"></div>

代码：

$(window).scroll(function() {
    currentScrollTop = 120-$(window).scrollTop();
    console.log(currentScrollTop);
    if (currentScrollTop<0) currentScrollTop=0
    $("#navigation")[0].style.top=currentScrollTop+"px";
});

Answer 3

设置此行

var barMenuOriginalTopPos = $('#navigation').offset().top;

as

var barMenuOriginalTopPos = $('#navigation').offset().top + 6;

参考 LIVE DEMO

使div元素贴在屏幕顶部

3 个答案: