Question

前几天我发现了一个javascript代码，而且我不擅长使用javascript，所以我需要一些帮助。问题是，我想建立一个像Instagram应用程序的网站。我用一些图片做了一个例子。

http://i.imgur.com/tiDI2Ct.jpg

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

在我的网站上，我有一个带徽标的顶部，当标题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;
}

Answer 2

$(document).ready(function() {
			// grab the initial top offset of the navigation 
		   	var stickyNavTop = $('.navigation').offset().top;
		   	
		   	// our function that decides weather the navigation bar should have "fixed" css position or not.
		   	var stickyNav = function(){
			    var scrollTop = $(window).scrollTop(); // our current vertical position from the top
			         
			    // if we've scrolled more than the navigation, change its position to fixed to stick to top,
			    // otherwise change it back to relative
			    if (scrollTop > stickyNavTop) { 
			        $('.navigation').addClass('sticky');
			    } else {
			        $('.navigation').removeClass('sticky'); 
			    }
			};

			stickyNav();
			// and run it again every time you scroll
			$(window).scroll(function() {
				stickyNav();
			});
		});

向上滚动时浮动菜单栏会粘到顶部，一个替换另一个jquery

2 个答案: