向上滚动时浮动菜单栏粘在顶部,一个替换另一个 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的主要内容,如果未能解决你的问题,请参考以下文章