一旦滚动到屏幕顶端，我怎样才能让div粘贴到屏幕的顶部？
我想创build一个div，位于一个内容块的下方，但是一旦页面已经滚动到足以与其顶部边界接触，就会固定到位并与页面一起滚动。 我知道我已经看到至less有一个在线的例子，但我不记得它为我的生活。
有什么想法吗？
你可以使用简单的CSS，将你的元素定位为固定的 ：
.fixedElement { background-color: #c0c0c0; position:fixed; top:0; width:100%; z-index:100; }
编辑：你应该有绝对位置的元素，一旦滚动偏移已经到达元素，它应该被改变为固定的，并且顶部位置应该被设置为零。
您可以使用scrollTop函数检测文档的顶部滚动偏移量：
$(window).scroll(function(e){ var $el = $('.fixedElement'); var isPositionFixed = ($el.css('position') == 'fixed'); if ($(this).scrollTop() > 200 && !isPositionFixed){ $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); } if ($(this).scrollTop() < 200 && isPositionFixed) { $('.fixedElement').css({'position': 'static', 'top': '0px'}); } });
当滚动偏移量达到200时，元素将粘贴到浏览器窗口的顶部，因为它是固定的。
您已经在Google Code的问题页面上看到了这个例子，并且在Stack Overflow的编辑页面（仅在最近）才看到这个例子。
当您向后滚动时，CMS的回答不会恢复定位。 这是从Stack Overflow无耻窃取的代码：
function moveScroller() { var $anchor = $("#scroller-anchor"); var $scroller = $('#scroller'); var move = function() { var st = $(window).scrollTop(); var ot = $anchor.offset().top; if(st > ot) { $scroller.css({ position: "fixed", top: "0px" }); } else { $scroller.css({ position: "relative", top: "" }); } }; $(window).scroll(move); move(); }
<div id="sidebar" style="width:270px;"> <div id="scroller-anchor"></div> <div id="scroller" style="margin-top:10px; width:270px"> Scroller Scroller Scroller </div> </div> <script type="text/javascript"> $(function() { moveScroller(); }); </script>
还有一个简单的现场演示 。
一个新生的，无脚本的替代方式是position: sticky Chrome，Firefox和Safari支持position: sticky 。 请参阅HTML5Rocks和演示 文档以及Mozilla文档 。
我遇到了和你一样的问题，并最终做出了一个jQuery插件来照顾它。 它实际上解决了人们在这里列出的所有问题，并增加了一些可选function。
选项
stickyPanelSettings = { // Use this to set the top margin of the detached panel. topPadding: 0, // This class is applied when the panel detaches. afterDetachCSSClass: "", // When set to true the space where the panel was is kept open. savePanelSpace: false, // Event fires when panel is detached // function(detachedPanel, panelSpacer){....} onDetached: null, // Event fires when panel is reattached // function(detachedPanel){....} onReAttached: null, // Set this using any valid jquery selector to // set the parent of the sticky panel. // If set to null then the window object will be used. parentSelector: null };
https://github.com/donnyv/sticky-panel
演示： http : //htmlpreview.github.io/? https: //github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
这里是如何没有 jQuery
var startProductBarPos=-1; window.onscroll=function(){ var bar = document.getElementById('nav'); if(startProductBarPos<0)startProductBarPos=findPosY(bar); if(pageYOffset>startProductBarPos){ bar.style.position='fixed'; bar.style.top=0; }else{ bar.style.position='relative'; } }; function findPosY(obj) { var curtop = 0; if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) { while (obj.offsetParent) { curtop += obj.offsetTop; obj = obj.offsetParent; } curtop += obj.offsetTop; } else if (obj.y) curtop += obj.y; return curtop; }
* {margin:0;padding:0;} .nav { border: 1px red dashed; background: #00ffff; text-align:center; padding: 21px 0; margin: 0 auto; z-index:10; width:100%; left:0; right:0; } .header { text-align:center; padding: 65px 0; border: 1px red dashed; } .content { padding: 500px 0; text-align:center; border: 1px red dashed; } .footer { padding: 100px 0; text-align:center; background: #777; border: 1px red dashed; }
<header class="header">This is a Header</header> <div id="nav" class="nav">Main Navigation</div> <div class="content">Hello World!</div> <footer class="footer">This is a Footer</footer>
截至2017年1月和Chrome 56的发布，大多数常用浏览器都支持CSS中的position: sticky属性。
#thing_to_stick { position: sticky; top: 0px; }
在Firefox和Chrome中为我做的伎俩。
在Safari中，您仍然需要使用position: -webkit-sticky 。
Polyfills可用于Internet Explorer和Edge; https://github.com/wilddeer/stickyfill似乎是一个很好的。;
这是我用jQuery做的。 这是从堆栈溢出的各种答案拼凑在一起。 这个解决schemecachingselect器以获得更快的性能，并且在粘性div变粘时解决“跳跃”问题。
检查出来jsfiddle： http : //jsfiddle.net/HQS8s/
CSS：
.stick { position: fixed; top: 0; }
JS：
$(document).ready(function() { // Cache selectors for faster performance. var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); // Run this on scroll events. $window.scroll(function() { var window_top = $window.scrollTop(); var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { // Make the div sticky. $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { // Unstick the div. $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); });
这是另一个select：
JAVASCRIPT
var initTopPosition= $('#myElementToStick').offset().top; $(window).scroll(function(){ if($(window).scrollTop() > initTopPosition) $('#myElementToStick').css({'position':'fixed','top':'0px'}); else $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'}); });
你的#myElementToStick应该以position:absolute CSS属性开始。
我的解决scheme有点冗长，但它处理从中心布局左边的variables定位。
// Ensurs that a element (usually a div) stays on the screen // aElementToStick = The jQuery selector for the element to keep visible global.makeSticky = function (aElementToStick) { var $elementToStick = $(aElementToStick); var top = $elementToStick.offset().top; var origPosition = $elementToStick.css('position'); function positionFloater(a$Win) { // Set the original position to allow the browser to adjust the horizontal position $elementToStick.css('position', origPosition); // Test how far down the page is scrolled var scrollTop = a$Win.scrollTop(); // If the page is scrolled passed the top of the element make it stick to the top of the screen if (top < scrollTop) { // Get the horizontal position var left = $elementToStick.offset().left; // Set the positioning as fixed to hold it's position $elementToStick.css('position', 'fixed'); // Reuse the horizontal positioning $elementToStick.css('left', left); // Hold the element at the top of the screen $elementToStick.css('top', 0); } } // Perform initial positioning positionFloater($(window)); // Reposition when the window resizes $(window).resize(function (e) { positionFloater($(this)); }); // Reposition when the window scrolls $(window).scroll(function (e) { positionFloater($(this)); }); };
对于那些与其他人有问题的人来说，这是另一个版本。 它将这个重复问题中讨论的技术组合在一起，并dynamic生成所需的帮助DIV，因此不需要额外的HTML。
CSS：
.sticky { position:fixed; top:0; }
JQuery的：
function make_sticky(id) { var e = $(id); var w = $(window); $('<div/>').insertBefore(id); $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id); var n = e.next(); var p = e.prev(); function sticky_relocate() { var window_top = w.scrollTop(); var div_top = p.offset().top; if (window_top > div_top) { e.addClass('sticky'); n.show(); } else { e.removeClass('sticky'); n.hide(); } } w.scroll(sticky_relocate); sticky_relocate(); }
要使元素粘性，请执行以下操作：
make_sticky('#sticky-elem-id');
当元素变粘时，代码pipe理剩余内容的位置，以防止它跳入粘性元素留下的空隙。 当它向上滚动时，它还将粘性元素返回到其原始非粘性位置。
这是Josh Lee的答案的扩展版本。 如果你想让div在右侧，并在一个范围内浮动（即，你需要指定顶部和底部的锚点位置）。 它还修复了一个错误，当你在移动设备上查看这个（你需要检查左滚动位置，否则div将离开屏幕）。
function moveScroller() { var move = function() { var st = $(window).scrollTop(); var sl = $(window).scrollLeft(); var ot = $("#scroller-anchor-top").offset().top; var ol = $("#scroller-anchor-top").offset().left; var bt = $("#scroller-anchor-bottom").offset().top; var s = $("#scroller"); if(st > ot) { if (st < bt - 280) //280px is the approx. height for the sticky div { s.css({ position: "fixed", top: "0px", left: ol-sl }); } else { s.css({ position: "fixed", top: bt-st-280, left: ol-sl }); } } else { s.css({ position: "relative", top: "", left: "" }); } }; $(window).scroll(move); move(); }
我在search同样的东西的时候碰到了这个。 我知道这是一个老问题，但我想我会提供一个更近的答案。
Scrollorama有一个“别针”的function，这正是我正在寻找。
提供的信息来回答这个问题可能对你有帮助，埃文：
滚动后检查元素是否可见
您基本上想要修改元素的样式，只有在validation了document.body.scrollTop值等于或大于元素的顶部之后才将其设置为固定。
接受的答案有效，但如果您在上面滚动，则不会移回原来的位置。 它被放置在那里后始终坚持顶部。
$(window).scroll(function(e) { $el = $('.fixedElement'); if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') { $('.fixedElement').css( 'position': 'fixed', 'top': '0px'); } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') { $('.fixedElement').css( 'relative': 'fixed', 'top': '42px'); //this was just my previous position/formating } });
jleedev的回应是有效的，但是我却无法使其工作。 他的例子页面也没有工作（对我来说）。
你可以添加3个额外的行，所以当用户滚动到顶部时，div会粘在老的地方：
这里是代码：
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){ $('.fixedElement').css({'position': 'relative', 'top': '200px'}); }
我在链接中设置链接，所以它是一个字母和数字链接的垂直列表。
#links { float:left; font-size:9pt; margin-left:0.5em; margin-right:1em; position:fixed; text-align:center; width:0.8em; }
然后，我设置这个方便的jQuery函数来保存加载的位置，然后更改位置固定滚动超出该位置。
注意：这仅适用于链接在页面加载时可见！
var listposition=false; jQuery(function(){ try{ ///// stick the list links to top of page when scrolling listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position(); console.log(listposition); $(window).scroll(function(e){ $top = $(this).scrollTop(); $el = jQuery('#links'); //if(typeof(console)!='undefined'){ // console.log(listposition.top,$top); //} if ($top > listposition.top && $el.css('position') != 'fixed'){ $el.css({'position': 'fixed', 'top': '0px'}); } else if ($top < listposition.top && $el.css('position') == 'fixed'){ $el.css({'position': 'static'}); } }); } catch(e) { alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)'); } });
我使用了上面的一些工作来创build这个技术。 我改进了一下，认为我会分享我的工作。 希望这可以帮助。
jsfuddle代码
function scrollErrorMessageToTop() { var flash_error = jQuery('#flash_error'); var flash_position = flash_error.position(); function lockErrorMessageToTop() { var place_holder = jQuery("#place_holder"); if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") { flash_error.css({ 'position': 'fixed', 'top': "0px", "width": flash_error.width(), "z-index": "1" }); place_holder.css("display", ""); } else { flash_error.css('position', ''); place_holder.css("display", "none"); } } if (flash_error.length > 0) { lockErrorMessageToTop(); jQuery("#flash_error").after(jQuery("<div id='place_holder'>")); var place_holder = jQuery("#place_holder"); place_holder.css({ "height": flash_error.height(), "display": "none" }); jQuery(window).scroll(function(e) { lockErrorMessageToTop(); }); } } scrollErrorMessageToTop();
这是一个更有活力的滚动方式。 这确实需要一些工作，我会在某种程度上把它变成一个插件，但是这是我在工作一小时后想出来的。
在JavaScript中你可以这样做：
var element = document.getElementById("myid"); element.style.position = "fixed"; element.style.top = "0%";
不是一个确切的解决scheme，而是一个很好的select
这个CSS只有屏幕滚动条的顶部 。 解决所有的问题， 只有CSS ， 没有 JavaScript， 没有 JQuery， 没有大脑的工作（ 哈哈 ）。
享受我的小提琴 ：D所有的代码都包含在里面:)
CSS
#menu { position: fixed; height: 60px; width: 100%; top: 0; left: 0; border-top: 5px solid #a1cb2f; background: #fff; -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); z-index: 999999; } .w { width: 900px; margin: 0 auto; margin-bottom: 40px; }<br type="_moz">
把内容放到足够长的时间，这样你就可以在这里看到效果了:)哦，这里也有参考，因为他应该得到这个信用
仅限CSS屏幕顶部的滚动条
以下是一个使用jQuery可见插件的示例： http : //jsfiddle.net/711p4em4/ 。
HTML：
<div class = "wrapper"> <header>Header</header> <main> <nav>Stick to top</nav> Content </main> <footer>Footer</footer> </div>
CSS：
* { margin: 0; padding: 0; } body { background-color: #e2e2e2; } .wrapper > header, .wrapper > footer { font: 20px/2 Sans-Serif; text-align: center; background-color: #0040FF; color: #fff; } .wrapper > main { position: relative; height: 500px; background-color: #5e5e5e; font: 20px/500px Sans-Serif; color: #fff; text-align: center; padding-top: 40px; } .wrapper > main > nav { position: absolute; top: 0; left: 0; right: 0; font: 20px/2 Sans-Serif; color: #fff; text-align: center; background-color: #FFBF00; } .wrapper > main > nav.fixed { position: fixed; top: 0; left: 0; right: 0; }
JS（包括jQuery可见插件）：
(function($){ /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ var $w = $(window); $.fn.visible = function(partial,hidden,direction){ if (this.length < 1) return; var $t = this.length > 1 ? this.eq(0) : this, t = $t.get(0), vpWidth = $w.width(), vpHeight = $w.height(), direction = (direction) ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; if (typeof t.getBoundingClientRect === 'function'){ // Use this native browser method, if available. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight, bViz = rec.bottom > 0 && rec.bottom <= vpHeight, lViz = rec.left >= 0 && rec.left < vpWidth, rViz = rec.right > 0 && rec.right <= vpWidth, vVisible = partial ? tViz || bViz : tViz && bViz, hVisible = partial ? lViz || rViz : lViz && rViz; if(direction === 'both') return clientSize && vVisible && hVisible; else if(direction === 'vertical') return clientSize && vVisible; else if(direction === 'horizontal') return clientSize && hVisible; } else { var viewTop = $w.scrollTop(), viewBottom = viewTop + vpHeight, viewLeft = $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, _bottom = _top + $t.height(), _left = offset.left, _right = _left + $t.width(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom, compareLeft = partial === true ? _right : _left, compareRight = partial === true ? _left : _right; if(direction === 'both') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); else if(direction === 'vertical') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); else if(direction === 'horizontal') return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); } }; })(jQuery); $(function() { $(window).scroll(function() { $(".wrapper > header").visible(true) ? $(".wrapper > main > nav").removeClass("fixed") : $(".wrapper > main > nav").addClass("fixed"); }); });
正如乔什·李和科林·哈特所说，你可以select使用position: sticky; top: 0; position: sticky; top: 0; 适用于你想要滚动的div …
另外，您唯一需要做的就是将其复制到页面顶部或将其格式化为适合外部CSS表单：
<style> #sticky_div's_name_here { position: sticky; top: 0; } </style>
只要用你的div的名字replace#sticky_div's_name_here ，也就是说，如果你的div是<div id="example">你会把#example { position: sticky; top: 0; } #example { position: sticky; top: 0; } #example { position: sticky; top: 0; } 。
粘直到页脚击中div：
function stickyCostSummary() { var stickySummary = $('.sticky-cost-summary'); var scrollCostSummaryDivPosition = $(window).scrollTop(); var footerHeight = $('#footer').height(); var documentHeight = $(document).height(); var costSummaryHeight = stickySummary.height(); var headerHeight = 83; var footerMargin = 10; var scrollHeight = 252; var footerPosition = $('#footer').offset().top; if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) { stickySummary.removeAttr('style'); stickySummary.addClass('fixed'); } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) { stickySummary.removeClass('fixed'); stickySummary.css({ "position" : "absolute", "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px" }); } else { stickySummary.removeClass('fixed'); stickySummary.css({ "position" : "absolute", "top" : "0" }); } } $window.scroll(stickyCostSummary);
