停止固定位置在某个点滚动？
我有一个位置的元素：固定和滚动页面，但我想如何。 当用户向上滚动时，我希望元素在某个点停止滚动，比如从页面顶部开始是250px，这可能吗？ 任何帮助或build议将是有益的谢谢！
我有一种感觉，我需要使用jQuery来这样做。 我试图得到滚动或位置的用户在哪里，但真的很困惑，有没有任何jQuery解决scheme？
下面是我刚刚写的一个快速的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).scroll(function(){ $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop())); });
$(window).scroll(function(){ $("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop())); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div> <!-- random filler to allow for scrolling --> STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>
这是一个完整的jquery插件，可以解决这个问题：
https://github.com/bigspotteddog/ScrollToFixed
这个插件的描述如下：
这个插件用于将元素固定到页面的顶部，如果元素将垂直滚动到视图外的话; 但是，它确实允许元素继续向左或向右移动水平滚动。
给定一个选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动; 但是，当页面向左或向右滚动时，元素仍然会水平移动。 一旦页面向下滚动到目标位置，元素将被恢复到页面上的原始位置。
此插件已在Firefox 3/4，Google Chrome 10/11，Safari 5和Internet Explorer 8/9中进行了testing。
用于您的特定情况：
<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中testing）。
你可以修复，如果你把“边缘顶”，而不是“顶”。 真的不知道为什么它与保证金工作。
$(window).scroll(function(){ $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop())); });
在一个项目中，我实际上有一些标题固定到页面加载的屏幕底部（这是一个绘图应用程序，所以标题是在底部给宽视口上的canvas元素的最大空间）。
因为我不希望标题在页脚之上（标题颜色和页脚背景颜色相同），所以我需要标题在滚动页面到达页脚时变成“绝对”。
我在这里采用了最老的回应（由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); }
我写了一篇有关这个function的博客文章 ：
$.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(); }); };
我的解决scheme
$(window).scroll(function(){ if($(this).scrollTop()>425) { $("#theRelative").css("margin-top",$(this).scrollTop()-425); } else { $("#theRelative").css("margin-top",$(this).scrollTop()-0); } }); });
使用Mootools框架的解决scheme。
http://mootools.net/docs/more/Fx/Fx.Scroll
-
使用$（'myElement'）。getPosition（）。x获取要停止滚动的元素的位置（x和y）。
$（ 'myElement'）。为getPosition（）。ÿ
-
对于animationtypes的滚动使用：
new Fx.Scroll（'scrollDivId'，{offset：{x：24，y：432}}）。toTop（）;
-
要立即设置滚动使用：
新的Fx.Scroll（myElement）.set（x，y）;
希望这可以帮助 ！！ ：d
我喜欢这个解决scheme
$(window).scroll(function(){ $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop())); });
我的问题是我不得不在Adobe Muse中处理相对容器的位置。
我的解决scheme
$(window).scroll(function(){ if($(this).scrollTop()>425) { $("#theRelative").css("margin-top",$(this).scrollTop()-425); } });
只是简单的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);
我修改了@ mVchr的答案，并将其反转为用于粘性广告定位：如果您需要将其绝对定位（滚动），直到标题垃圾被closures，但之后需要在屏幕上保持固定/可见：
$.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; }
我喜欢@詹姆斯的回答，但我正在寻找它的反面，即在页脚之前停止固定位置，这是我想出了
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)); }
所以现在固定的元素会在页脚之前停下来。 并不会与它重叠。
