將div元素粘貼到屏幕頂部

Question

我寫了一個腳本來檢測何時到達導航欄的div元素，然后將其css更改為fixed和top 0的位置，這樣它將固定在top上，問題是它沒有做到這一點，就像滾動到頂部一樣，它跳到屏幕的開頭。 （忽悠）

使用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;

如

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

參考現場演示