jquery - float 菜单栏向上滚动时粘在顶部，一个替换另一个jquery

Question

前几天我发现了一段 javascript 代码，但我不擅长 javascript，所以我需要一些帮助。问题是我想制作一个类似于 Instagram 应用程序的网站。我用一些图片做了一个例子。

/image/CfprV.jpg

想象一下左边的图片是第一张，中间的第二张，右边的第三张。

在我的网站上，我有一个带有 Logo 的顶部，当标题 1 到达顶部时，它会保持在顶部。我找到了一个关于此的代码，但我需要当您滚动时，标题 2 将标题 1 推开或移到标题 1 的前面。

这是我找到的代码，但当我有多个条形图时，当到达顶部时应将其固定在顶部时，它不起作用。

谢谢

    $(window).scroll(function(e) 
    var scroller_anchor = $(".scroller_anchor").offset().top; 
        if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed') 
        {  
            $('.scroller').css({
                'background': 'white',
                'position': 'fixed',
                'top': '0px'
            });

            $('.scroller_anchor').css('height', '50px');
        } 
        else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative') 
        {      

            $('.scroller_anchor').css('height', '0px');

            $('.scroller').css({
                'background': 'white',
                'position': 'relative'
            });
        }
    });

Answer 1

我认为问题在于每个菜单栏都必须单独跟踪其顶部偏移量。

这是一个简单的解决方案，我相信它的作用至少与您正在寻找的类似:

http://jsfiddle.net/42Yuz/

代码:

jquery

$(document).ready(function(e) {
var menuTop1pos = $('#menutop1').offset().top;
var menuTop2pos = $('#menutop2').offset().top;

var stickToTop = function(){
    var winScrollTop = $(window).scrollTop();

    if (winScrollTop >= menuTop1pos) {
            $('#menutop1').addClass('stickTop1st');
    } else {
            $('#menutop1').removeClass('stickTop1st');  
    }

    if (winScrollTop >= menuTop2pos) {  
            $('#menutop2').addClass('stickTop2nd');
    } else {
            $('#menutop2').removeClass('stickTop2nd');  
    }
};

stickToTop();

$(window).scroll(function() {
        stickToTop();
});
});

CSS

.stickTop1st {
    position:fixed;
    top:0px;
    z-index:998;
    background-color:white;
}

.stickTop2nd {
    position:fixed;
    top:0px;
    z-index:999;
    background-color:white;
}