如何悬停固定元素直到它到达某个点答案

【问题标题】：How to hover a Fixed element until it reaches some point如何悬停固定元素直到它到达某个点
【发布时间】：2013-09-20 17:36:06
【问题描述】：

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

谢谢！

【问题讨论】：

@roman 我们可以很容易地做那种事情，但你能解释得更清楚......如果可能的话
@gov - 当然。我有一个 div 元素，它有 position:fixed 和 bottom: 0px;这意味着它只是固定在底部。我希望当它从底部到达 80px 时（向下滚动后）停止修复，并在我再次向上滚动时恢复修复。希望现在能得到更好的解释。
@roman 你能用 101010 符号或 cntr-k 编辑代码吗
抱歉 - 不知道 cntr-k 的事 :) 谢谢
我可以给你指出一个类似的教程，jQuery For Designers，demo available there。

标签： jquery css css-position

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在一个网站上遇到了类似的问题。我有一个有两列的 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();

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

有两种方法：

要么使用绝对位置，并补偿每个滚动条移动低于某个级别
或者固定位置，补偿高于一定水平。

在这两种情况下，您需要的是关于“位置值超过滚动值”的“带有凹痕的线性曲线”。实现这一点的最佳方法是 Math.min/max 函数。提示：fixed 方法对于静止部分的 wobbly 较少。除非您需要 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>

【讨论】：

【解决方案6】：

$(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 时它不起作用。

尝试更改此值并查看差异

【讨论】：

【解决方案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"});
    }
});

【讨论】：

【解决方案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。一旦它到达那里，它就会呆在那里。

【讨论】：

【解决方案9】：

*@roman , the below function triggers the scroll event* ,

您可以将所有自定义逻辑放在 this/// 计算、定位等中

$(window).scroll(function () {
    /* this function gets triggered whenever you do scroll.
       Write all your logic inside this */
});

【讨论】：

这正是我想要做的，但没有成功。应该有什么逻辑？（我会写我一直在努力做的）
@roman 在您的代码中定义此事件并在内部发出警报并让我知道它是否正在触发，然后我们可以根据您的逻辑来完成它。