向上滚动时浮动菜单栏粘在顶部,一个替换另一个 jquery

Posted

技术标签:

【中文标题】向上滚动时浮动菜单栏粘在顶部,一个替换另一个 jquery【英文标题】:Floating menu bars sticks to top when scrolling up, the one replaces the other jquery 【发布时间】:2014-04-06 13:15:12 【问题描述】:

前几天我发现了一个 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'
            );
        
    );

【问题讨论】:

【参考方案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;

【讨论】:

【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章

JQuery浮动菜单栏,滚动位置和延迟

在 NSTabelView 中禁用标题浮动?

粘性侧边栏:向下滚动时固定在底部,向上滚动时固定在顶部

创建一个下拉菜单,在页面顶部向上打开,向下滚动时向下打开

滚动时如何使菜单栏固定在顶部

当滚动页面到一定程度时,页顶菜单浮动固定在页面顶部