jQuery

Question

基本上我想在一个固定元素经过另一个元素后隐藏它，但我不知道该怎么做。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){ 

    var startOn = 5;
     var mc = $('#main_content').offset().top;
     var rc = $('#related_content').offset().top;
     var om = $('#openmodal').offset().top;

    var rangeLimit = rc - om;

    $(window).scroll(function() {


         var wscroll = $(this).scrollTop();

        $('#openmodal').text('Y:' + wscroll);

        if (wscroll <= rangeLimit && wscroll > startOn ) {

            $('#openmodal').fadeIn(100);


        } else {

            $('#openmodal').fadeOut(100);

        }
    });

});
</script>
<style type="text/css">

    body { 
        background-color: #fff; 
    }

    div { 
       height: 1400px; /* For testing purposes only! It will vary afterwords. */
       border-top: 1px dotted black; 
       padding: 50px; 
       margin: 20px 20px 40px; 
       background-color: #F0F0F0;
    }

    div#wrapper { height: auto; border: none; background-color: #fff;}

    #openmodal {
            position: fixed;
            background-color: #0F5F01;
            cursor: pointer;
            bottom: 20px;
            left: 6px;
            width:60px;
            border: 1px solid black;
            height: 27px;
            padding: 0;
            display: none;
            z-index: 999;
    }

</style>
</head>

<body>

<div id="wrapper">

<h1>My Website!</h1>

    <div id="main_content">
     <h2>This is my main content.</h2>
    </div>

    <div id="openmodal"></div>

    <div id="related_content">
     <h3>And this is my related content.</h3>
    </div>

</div>
</body>
</html>

所以我的想法是保持#openmodal 可见，直到滚动通过#related_content div 并且我似乎无法让它工作。所有 DIV 都会有可变高度（#openmodal 除外），我只是在此处设置高度以测试建议。

知道如何存档吗？

Answer 1

var startOn = 5;
var mc = $('#main_content').offset().top;
var rc = $('#related_content').offset().top;
var om = $('#openmodal').offset().top;

var rangeLimit = rc - om;

您在滚动函数之外声明这些，因此它们始终具有在页面加载时获得的初始值。您需要将它们放入处理滚动事件的函数中。

Answer 2

我相信我终于弄明白了！

所以基本上我无法获得隐藏元素的位置，我必须使用 position() 而不是 offset()。

这是我最终得到的结果：

<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).load(function() {


     var startOn = 5;
     var rc = $('#related_content').position().top;
     var om = $('#openmodal').position().top;
     $('#openmodal').hide();

    var rangeLimit = rc - om; 

    $(window).scroll(function() {

        var wscroll = $(this).scrollTop();

        $('#openmodal').text('Y:' + wscroll);

        if ( wscroll <= rangeLimit && wscroll > startOn ) {

            $('#openmodal').fadeIn(500);


        } else {

            $('#openmodal').fadeOut(500);

        }
    });

});
</script>
<style type="text/css">

    body { 
        background-color: #fff; 
    }

    div { 
       height: 1400px; /* For testing purposes only! It will vary afterwords. */
       border-top: 1px dotted black; 
       padding: 50px; 
       margin: 20px 20px 40px; 
       background-color: #F0F0F0;
    }

    div#wrapper { height: auto; border: none; background-color: #fff;}

    #openmodal {
            position: fixed;
            background-color: #0F5F01;
            cursor: pointer;
            bottom: 20px;
            left: 6px;
            width:60px;
            border: 1px solid black;
            height: 27px;
            padding: 0;
            z-index: 999;
    }

</style>
</head>

<body>

<div id="wrapper">

<h1>My Website!</h1>

    <div id="main_content">
     <h2>This is my main content.</h2>
    </div>

    <div id="openmodal"></div>

    <div id="related_content">
     <h3>And this is my related content.</h3>
    </div>

</div>
</body>
</html>

jQuery - 滚动经过另一个元素后隐藏固定元素

jQuery - Hide Fixed Element After Scrolling Past Another

html

css

scroll

responsive-design