如何将Fixed元素hover到某个点
我有一个div需要固定在屏幕的底部，直到滚动后到达某个点并停在那里并留下。 如果用户开始向上滚动 – 在传递相同的点后再次修复它。
关于如何实现这一点的任何想法？
编辑:(这是我目前的代码不起作用）
$(window).scroll(function () { if ($(this).scrollTop() < $(document).height() - 81) { $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css('bottom', "81px"); } }); CSS: #bottom_pic { position: fixed; bottom: 0px; }
$(window).scroll(function () { if ($(this).scrollTop() < $(document).height() - 81) { $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css('bottom', "81px"); } }); CSS: #bottom_pic { position: fixed; bottom: 0px; }
$(window).scroll(function () { if ($(this).scrollTop() < $(document).height() - 81) { $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css('bottom', "81px"); } }); CSS: #bottom_pic { position: fixed; bottom: 0px; }
谢谢！
jQuery Waypoints是一个很好的插件来实现这样的事情： 滚动后固定div的演示
我有一个与网站类似的问题。 我有一个有两列的div容器。 包含长文本文章的右列。 在左栏中有一个div导航列表，其中包含指向右列中每个文本文章的锚点链接。 我希望导航与页面一起滚动。 但是，它不应高于文本或低于它们。 我为它写了以下函数：
HTML: Right column of long texts JS Function: function shift_text_nav() { var top = $(window).scrollTop(); var t = $('#texts-container').offset().top; var left = $('#texts-container').offset().left; if (top > (t)) { var text_height = $('#texts').height(); var nav_height = $('#texts-sidebar').height(); if(t + text_height - nav_height - 40< top){ $('#texts-sidebar').css({'position':'absolute','top': (text_height - nav_height) + 'px','left':'0px'}); }else{ $('#texts-sidebar').css({'position':'fixed','top':'40px','left':left+'px'}); } } else { $('#texts-sidebar').css({'position':'absolute','top':'40px','left':'0px'}); } } $(window).scroll(function() { shift_text_nav(); }); $(window).resize(function() { shift_text_nav(); }); shift_text_nav();
我意识到这是一个古老的话题……但是我最近需要实现这种性质的东西。 下面是完成任务的代码（请记住，您可能需要修改css以使其在适当的位置显示以满足您的需求，我的目的是将元素停靠在屏幕顶部）。 另外，这取决于jQuery。
$(document).ready(function () { // initialize the dock Dock(); // add the scroll event listener if (window.addEventListener) { window.addEventListener('scroll', handleScroll, false); } else { window.attachEvent('onscroll', handleScroll); } }); function Dock() { Dock.GetDock = document.getElementById('dockable'); Dock.NewScrollOffset = getScrollOffset(); Dock.DockBottomPos = getDockBottomPos(); Dock.DockTopPos = getDockTopPos(); } function getScrollOffset() { var scrollOffset = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop; return scrollOffset; } function getDockBottomPos() { var dockTopPos = getDockTopPos(); var dockHeight = $('#dockable').height(); return (dockTopPos + dockHeight); } function getDockTopPos() { var dockTopPos = $('#dockable').offset().top; return dockTopPos; } function handleScroll(){ if (window.XMLHttpRequest) { // determine the distance scrolled from top of the page Dock.NewScrollOffset = getScrollOffset(); if (Dock.NewScrollOffset >= Dock.DockBottomPos) { Dock.GetDock.className = "fixed"; return; } if (Dock.NewScrollOffset <= Dock.DockTopPos) { Dock.GetDock.className = ""; } } }
CSS：
#dockable { position: relative; width: inherit; } #dockable.fixed { position: fixed; top: 0px; }
docker的一个例子是......
#dockable div { display: inline; *zoom: 1; height: 25px; line-height: 25px; padding: 5px 10px 5px 10px; }
$(window).scroll(function() { checkPosition('#myelement'); }); function checkPosition( element ){ //choose your limit var positionLimit = 416; var y = getOffsetY(); if( y <= positionLimit ){ $(element).css({'position':'fixed','bottom':'0'}); } else{ $(element).css({'position':'relative'}); } }
//用于浏览器兼容性
function getOffsetY(){ var scrOfY = 0; if( typeof( window.pageYOffset ) == 'number' ) { //Netscape compliant scrOfY = window.pageYOffset; } else if( document.body && ( document.body.scrollTop ) ) { //DOM compliant scrOfY = document.body.scrollTop; } else if( document.documentElement && ( document.documentElement.scrollTop ) ) { //IE6 standards compliant mode scrOfY = document.documentElement.scrollTop; } return scrOfY; }
这应该是有效的。 要获得元素的y偏移量，您必须使用函数才能获得浏览器兼容性。 您所要做的就是设置正确的极限位置。
有两种方法可以解决这个问题：
- 或者使用绝对位置，并补偿低于某个水平的每个滚动条运动
- 或者使用固定位置，并在一定水平以上进行补偿。
在这两种情况下，您需要的是“ 带有凹痕的线性曲线 ”，关于“位置值超过滚动值”。 最好的方法是Math.min / max函数。 提示：对于静止部分， 固定方法不那么摇晃 。 除非您需要IE6支持（无法解决），请使用#fix解决方案。
Absolute Fixed
$(window).scroll(function(){ if($(this).scrollTop() < $(document).height() -1000){ $(selector).css("position", "fixed"); $(selector).css("bottom","0"); } else { $(selector).css('bottom', "81px"); } });
我尝试了这个代码，它适用于$（document）.height（）-500）。 但由于某种原因，我无法理解当值500减少到100或81时它不起作用。
尝试更改此值并查看差异
对不起复活“死”，但我遇到了同样的问题并想到我会分享我提出的解决方案。 就我而言，我在中心对齐的固定宽度网站和流体宽度页眉和页脚的两侧都有图像（ #rm_gutter_left and #rm_gutter_right ）。 当然，您可以将其调整为仅适用于一个元素或使用类。
希望这有助于其他人。
// Height and footer settings var rm_header_height = 67; // px var rm_footer_height = 200; // px // Store so jquery only has to find them once var rm_gutters = $("#rm_gutter_left, #rm_gutter_right"); // Set initial gutter position rm_gutters.css("top", rm_header_height + "px"); // Attach to window's scroll event $(window).scroll(function() { st = $(this).scrollTop(); h = $(document).height() - $(window).height(); // Is the header still in view? if (st < rm_header_height) { rm_gutters.css({"top": rm_header_height + "px", "bottom": "auto"}); // Are neither the footer or header in view? } else if (st < h - rm_footer_height) { rm_gutters.css({"top": 0, "bottom": "auto"}); // Is the footer in view? } else { rm_gutters.css({"top": "auto", "bottom": rm_footer_height + "px"}); } });
$(window).scroll(function () { if ($(this).scrollTop() < $(document).height() - 81) { $('#bottom_pic').css("position", "fixed"); $('#bottom_pic').css('bottom', "0px"); } else { $('#bottom_pic').css("position", "absolute"); $('#bottom_pic').css({'top':(($(document).height())-81)+'px'}); } });
这将使div固定在底部，直到距离顶部81px。 一旦它到达那里，它将留在那里。
*@roman , the below function triggers the scroll event* ,
您可以将所有自定义逻辑放在此///计算，定位等中
$(window).scroll(function () { /* this function gets triggered whenever you do scroll. Write all your logic inside this */ });