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

我需要停止一个div，它在滚动到一个固定位置之前触摸另一个元素，基本上使其返回到某个位置的绝对位置，并且这应该在任何尺寸的屏幕。我有一个带有代码的jsfiddle，有两个元素，请参阅示例和帮助，如果您知道答案，谢谢！在某个div或某个位置停止固定位置

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/

让我知道这是不明确的。

来源

2017-07-26 Z3K

是否这样？

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>

来源

2017-07-26 13:37:24 Cylexx

您的片断给人错误，你能仔细检查 – Z3K

编辑，我忘了补充的JQuery库 – Cylexx

是的香港专业教育学院错过了这就是为什么我删除了评论:)感谢您的帮助患病把它如解决 – Z3K

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

回答

相关问题