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 - 滚动过去另一个后隐藏固定元素

2 个答案: