将固定位置停在某个div或某个位置

Question

我需要停止一个div，该div在滚动到另一个元素之前会在滚动上获得固定位置，基本上使它返回到某个位置的绝对位置，并且该div应该可以在屏幕的任何尺寸下工作。 我有一个带代码的jsfiddle，有两个元素，如果您知道答案，请查看示例并提供帮助！

var navTop = $('#nav').offset().top;
var lastMode = "absolute";

$(window).scroll(function(){
var mode;
if ($(this).scrollTop() >= navTop) {
    mode = 'fixed';
} else {
    mode = 'absolute';
}

if(lastMode !== mode) {
    if (mode == 'fixed') {
        $('#nav').css('position', 'fixed');
        $('#nav').css('top', '0');
    } else {
        $('#nav').css('position', 'absolute');
        $('#nav').css('top', navTop);
    }
    lastMode = mode;
}
});

https://jsfiddle.net/Zygimantas10/vro3LLu9/

让我知道是否不清楚。

Answer 1

像这样？

 var navTop = $('#nav').offset().top; var navStop = $('#stop').offset().top; var lastMode = "absolute"; $(window).scroll(function() { var mode; if ($(this).scrollTop() >= navTop) { if ($(this).scrollTop() - navStop + $('#nav').height() > 0) mode = 'absolute'; else mode = 'fixed'; } else { mode = 'absolute'; } if (lastMode !== mode) { if (mode == 'fixed') { $('#nav').css('position', 'fixed'); $('#nav').css('top', '0'); } else { $('#nav').css('position', 'absolute'); $('#nav').css('top', navTop); } lastMode = mode; } });

 #nav { background: rgba(0, 0, 0, 0.5); position: absolute; top: 200px; width: 100px; height: 50px; } #stop { width: 100%; background: blue; height: 300px; position: absolute; top: 900px; margin-top: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body style="height:5000px;"> <div id="nav"></div> <div id="stop"></div> </body>

将固定位置停在某个div或某个位置

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-07-26 13:37:24

将固定位置停在某个div或某个位置

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-07-26 13:37:24

解决方案1
3 已采纳 2017-07-26 13:37:24