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;
}

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

谢谢！

Answer 1

jQuery Waypoints是实现以下目标的绝佳插件：Demo of fixed div after scrolling

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

Answer 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>

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

Answer 5

有两种方法可以解决这个问题：

要么使用绝对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 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时，它不起作用。

尝试更改此值并查看差异

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

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

如何将Fixed元素悬停到某个点

9 个答案: