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

Posted 2023-03-31

【中文标题】向上滚动时浮动菜单栏粘在顶部，一个替换另一个 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();
			);
		);