我有我的页面顶部被固定位置，一间酒吧。 当用户滚动到某一点我想了吧，开始动起来，如果它是相对或绝对定位。
眼下，从固定栏上的CSS绝对位置，但当然这台DIV直接访问该网页的顶部。
我一直在寻找这样的年龄，不能让我的头围绕我怎么会在同一时间推棒了一个像素为滚动过去_triggerOffset每个像素
任何人都可以告诉我吗？
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute'});
}
});
}
banner();
我已经做了小提琴。
检查这个小提琴
工作演示
$(document).ready(function() {
var postionToTriggerMove = 500;
var positioninitial = $(window).scrollTop();
var positioninitialLine = $(".line").offset().top;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if(_scroll > positioninitial) {
if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
{
var topBarPostion = $(".line").offset().top;
$('.line').css({'position':'absolute',"top":topBarPostion});
}
}
else {
if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
{
var topBarPostion = $(".line").offset().top;
$('.line').css({'position':'fixed',"top":positioninitialLine});
}
}
positioninitial = _scroll;
});
});
你可以尝试像下面：
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute','top':_triggerOffset - (_scroll-_triggerOffset)});
}
});
}
banner();
此代码高度未经测试，但我们正在做的是最初设置元素的绝对位置和定义这个元素作为_triggerOffset顶部什么，接下来我们就当前的滚动和triggerOffset之间的差异，从顶部位置减去该使杆移越多，你向下滚动。
不知道如果这是你脑子里想的是什么，但我想看看这样一个解决方案。 你可能想在里面加一些条件，以确保顶上不要低于0或导航将关闭屏幕。
谢谢，有玩弄这两个例子中，他们的工作很不错。
到底我调整我的代码，而是使杆位置顶0像素的我具有等于偏移距离的像素使它位置上方。 不知道为什么我之前没想到这一点。
在另一方面，我使用Shinov对anoher项目代码，我很喜欢它:)
谢谢
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute', 'top':_triggerOffset+'px'});
}else if (_scroll <= _triggerOffset){
$('#top-bar').css({'position':'fixed', 'top':'0px'});
}
});
}
