Answers:
这是我刚刚写的一个快速jQuery插件,可以满足您的要求:
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#yourDiv').followTo(250);
$('window')
不应该用引号引起来。但是,为此,它非常有帮助。
你的意思是这样吗?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
bottom
在于最大值中的和计算出的值(偏移250)。
这是一个完整的jquery插件,可以解决此问题:
https://github.com/bigspotteddog/ScrollToFixed
该插件的说明如下:
如果该元素垂直滚动出视图,则该插件用于将元素固定在页面顶部。但是,它确实允许元素随着水平滚动继续向左或向右移动。
给定一个marginTop选项,一旦垂直滚动到达目标位置,该元素将停止垂直向上移动;否则,元素将停止垂直移动。但是,当页面向左或向右滚动时,元素仍将水平移动。页面向下滚动到目标位置后,该元素将恢复到页面上的原始位置。
此插件已在Firefox 3/4,Google Chrome 10/11,Safari 5和Internet Explorer 8/9中经过测试。
具体用法:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed({ marginTop: 250 });
});
您可以在答案中使用James Montagne的代码进行操作,但这会使它在Chrome中闪烁(在V19中进行了测试)。
如果您放置“ margin-top”而不是“ top”,则可以解决此问题。真的不知道为什么它会与保证金一起工作。
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
可能的CSS仅解决方案可以通过position: sticky;
浏览器支持实际上非常好:https : //caniuse.com/#search=position%3A%20sticky
这是一个示例:https : //jsfiddle.net/0vcoa43L/7/
在一个项目中,我实际上在页面加载时将一些标题固定在屏幕的底部(这是一个绘图应用程序,因此标题位于底部,以便在宽视口中为画布元素提供最大的空间)。
当标题到达滚动页脚时,我需要标题变为“绝对”,因为我不希望标题超过页脚(标题颜色与页脚背景色相同)。
我在这里得到了最早的答复(由Gearge Millo编辑),并且该代码段适用于我的用例。经过一些玩耍,我开始工作了。现在,一旦到达页脚,固定标题就位于页脚上方。
只是以为我会分享用例及其工作原理,然后说谢谢!该应用程序:http : //joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}
$.fn.myFixture = function (settings) {
return this.each(function () {
// default css declaration
var elem = $(this).css('position', 'fixed');
var setPosition = function () {
var top = 0;
// get no of pixels hidden above the the window
var scrollTop = $(window).scrollTop();
// get elements distance from top of window
var topBuffer = ((settings.topBoundary || 0) - scrollTop);
// update position if required
if (topBuffer >= 0) { top += topBuffer }
elem.css('top', top);
};
$(window).bind('scroll', setPosition);
setPosition();
});
};
使用Mootools框架的解决方案。
http://mootools.net/docs/more/Fx/Fx.Scroll
使用$('myElement')。getPosition()。x获取要停止滚动的元素的Position(x&y)
$('myElement')。getPosition()。y
对于动画的滚动使用:
新的Fx.Scroll('scrollDivId',{offset:{x:24,y:432}})。toTop();
要立即设置滚动,请使用:
新的Fx.Scroll(myElement).set(x,y);
希望这可以帮助 !!:D
只是即兴的mVChr代码
$(".sidebar").css('position', 'fixed')
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
topPos = pos + $($this).height();
$this.css({
position: 'absolute',
top: topPos
});
} else {
$this.css({
position: 'fixed',
top: 250 //set your value
});
}
});
};
var height = $("body").height() - $("#footer").height() ;
$('.sidebar').followTo(height);
$('.sidebar').scrollTo($('html').offset().top);
$(this)
和存储$(window)
在变量中的原因是,您只需要这样做$this.height()
等等。如果插件存储原始的顶部值并在设置固定宽度时将其还原为顶部位置,而不是设置顶部位置会更好吗?另外,您是什么意思Just improvised mVChr code
?
我调整了@mVchr的答案并将其反转以用于粘性广告定位:如果您需要对其进行绝对定位(滚动),直到标题垃圾不在屏幕上,但之后需要使其固定/在屏幕上可见:
$.fn.followTo = function (pos) {
var stickyAd = $(this),
theWindow = $(window);
$(window).scroll(function (e) {
if ($(window).scrollTop() > pos) {
stickyAd.css({'position': 'fixed','top': '0'});
} else {
stickyAd.css({'position': 'absolute','top': pos});
}
});
};
$('#sticky-ad').followTo(740);
CSS:
#sticky-ad {
float: left;
display: block;
position: absolute;
top: 740px;
left: -664px;
margin-left: 50%;
z-index: 9999;
}
我喜欢@james的答案,但我一直在寻找它的反函数,即在页脚之前停止固定位置,这是我想出的
var $fixed_element = $(".some_element")
if($fixed_element.length){
var $offset = $(".footer").position().top,
$wh = $(window).innerHeight(),
$diff = $offset - $wh,
$scrolled = $(window).scrollTop();
$fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
}
因此,现在固定元素将在页脚之前停止。并且不会与之重叠。