Question

已经尝试了很长时间才能让它发挥作用。 div＆＃39;卷轴＆＃39;滚动滚动但滚动到最底部时滚动页脚。当它到达那个点时，有没有办法让它悬停在页脚之上？

我的代码如下：

HTML

<div id="scroller-anchor"></div> 
    <div id="scroller">
        <div class="sidebar-nav">
            <a href="#"><span>Next</span></a>
            <a href="#"><span><br/>Prev</span></a>
            <a href="#"><span>back</span></a>
        </div>
    </div> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<footer></footer>

CSS

.sidebar-nav{ height: 200px; background: yellow; }
footer { height: 600px; background: black; display: block; }

JQUERY：

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 {
            if(st <= ot) {
                $scroller.css({
                    position: "relative",
                    top: ""
                });
            }
        }
    };
    $(window).scroll(move);
    move(); 
}

$(function() {
   moveScroller();
});

FIDDLE：https://jsfiddle.net/xxfairydragonxx/r90rb4gf/

尝试了多种方法，包括添加一个css值，该值为“滚动条”提供了一个负余量。 div达到某一点但是我似乎无法想出一个有效的解决方案。

感谢您阅读

Answer 1

＆＃13;

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        var scroller_Height =  $scroller.outerHeight(true);
    		var footer_top = $('#footer').offset().top - scroller_Height;
        if(st < footer_top){
          if(st > ot && st < footer_top) {
              $scroller.css({
                  position: "fixed",
                  top: "0px"
              });
          } else {
            $scroller.css({
              position: "relative",
              top : "0px"
            });
          }
        }else{
        		$scroller.css({
              position: "absolute",
              top : "0px"
            });
        }
    };
    $(window).scroll(move);
    move(); 
}

$(function() {
       moveScroller();
});

＆＃13;

.sidebar-nav{ height: 200px; background: yellow; }
footer { height: 600px; background: black; display: block; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller-anchor"></div> 
        <div id="scroller">
            <div class="sidebar-nav">
                <a href="#"><span>Next</span></a>
                <a href="#"><span><br/>Prev</span></a>
                <a href="#"><span>back</span></a>
            </div>
        </div> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<footer id="footer"></footer>

＆＃13;

<强>步骤：

1-当页脚顶部触及滚动条的底部时，您需要获取页脚offset().top并使用#scroller height 减少它

2-使用if(st > ot && st < footer_top)代替if(st > ot) 但是，如果不是(st > ot && st < footer_top)，则#scroller会再次更改relative页脚offset().top所以它会在fixed和relative位置之间混淆..因此您需要制作另一个if(st < footer_top){并将#scroller位置更改为absolute代替relative使代码以正确的方式读取页脚offset().top

3-使用var ot = $anchor.offset().top;它将始终返回0，因此无需定义它并将ot更改为0

4-如果您需要#scroller位置，请在滚动后fixed大于#scroller的高度，然后您可以使用scroller_Height代替ot 1}}

试图让粘性棒在滚动上盘旋

1 个答案: