如何悬停一个固定的元素，直到它达到某个点

Question

我有一个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; 
} 

谢谢！

Answer 1

jQuery Waypoints是一个优秀的插件来实现这样的事情：Demo of fixed div after scrolling

Answer 2

*@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 */ 
}); 

Answer 3

$(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元素的偏移量，你必须使用一个函数来使浏览器兼容。你所要做的就是设置正确的极限位置。

Answer 4

有两种方法去做：

• 要么去用绝对的POS机，并赔偿每滚动运动低于一定程度
• 或具有固定POS去，并赔偿以上有一定的水平。

在这两种情况下，你需要的是“有凹痕线性曲线”有关“超过滚动值位置值”。最好的做法是Math.min/max函数。提示：固定方法是更少的摇晃为停滞部分。除非你需要IE6的支持（它不知道是否修复），请使用#fix解决方案。

<style type="text/css"> 
body { 
    height:1000px; /* create something to scroll*/ 
    border-left: 20px dotted blue; /* and something fancy */ 
} 

#abs { position:absolute; top: 200px; left:100px; background-color:#FCC; } 
#fix { position:fixed; top: 200px; left:200px; background-color:#CCF; }  
</style> 

<div id="abs">Absolute</div>   <div id="fix">Fixed</div> 

<script type="text/javascript"> <!-- have jQuery included before --> 
    $(window).scroll(function() { 
     $('#abs').css('top', 200 + Math.min(150, $(window).scrollTop())); 
     /* read: up to 150, compensate scrolling, 
        then stick with a fixed value (scroll along) */ 

     $('#fix').css('top', 200 - Math.max(0 , $(window).scrollTop() - 150)); 
     /* read: do nothing in the interval [0;150] */ 
    });   
</script> 

Answer 5

我和网站有类似的问题。我有一个有两列的div容器。包含长文本文章的右栏。在左栏是一个div导航列表，其中包含到右列中每个文本文章的锚链接。我希望导航页面滚动。但是，它不应该超出文本或低于它们。我写了下面的功能吧：

HTML: 
<div id="texts-container"> 
    <div id="texts">Right column of long texts</div> 
    <div id="texts-sidebar">Left Column navigation that scrolls with page</div> 
</div> 

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(); 

Answer 6

$(window).scroll(function(){ 
    if($(this).scrollTop() < $(document).height() -1000){ 
    $(selector).css("position", "fixed"); 
    $(selector).css("bottom","0"); 
    } 
    else 
    { 
    $(selector).css('bottom', "81px"); 
    } 
}); 

我想这个代码，它适用于$（文件）.height（）-500）。但由于某些原因，我无法理解当值500下降到100或81

尝试不起作用更改此值，看到了差距

Answer 7

对不起复活“死”的，但我在同样的问题中遇到了这个问题，并认为我会分享我提出的解决方案。就我而言，我在中心对齐的固定宽度位置和流体宽度页眉和页脚的任一侧上都有图像（#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"}); 
    } 
}); 

Answer 8

$(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从顶部离开。一旦到达那里，它就会呆在那里。

Answer 9

我意识到这是一个老话题。不过我最近需要实现这种性质的东西。下面是完成任务的代码（请记住，您可能需要修改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; 
} 

码头将是一个例子...

#dockable div 
{ 
    display: inline; 
    *zoom: 1; 
    height: 25px; 
    line-height: 25px; 
    padding: 5px 10px 5px 10px; 
} 
<div id="dockable"> 
    <div><a href="#">Menu Item 1</div> 
    <div><a href="#">Menu Item 2</div> 
    <div><a href="#">Menu Item 3</div> 
</div>