jQuery-滚动到另一个元素之后隐藏固定元素_Jquery_Html_Css_Responsive Design_Scroll

jQuery-滚动到另一个元素之后隐藏固定元素

jquery html css responsive-design scroll

jQuery-滚动到另一个元素之后隐藏固定元素,jquery,html,css,responsive-design,scroll,Jquery,Html,Css,Responsive Design,Scroll,基本上，我想在一个固定的元素经过另一个元素之后隐藏它，但我不知道如何隐藏它这是我的密码： <!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.

基本上，我想在一个固定的元素经过另一个元素之后隐藏它，但我不知道如何隐藏它

这是我的密码：

<!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>


测试1
$（函数（）{
var-startOn=5；
var mc=$（“#主内容”）.offset（）.top；
var rc=$（“#相关内容”）.offset（）.top；
var om=$（'#openmodal'）.offset（）.top；
var rangeLimit=rc-om；
$（窗口）。滚动（函数（）{
var wscroll=$（this.scrollTop（）；
$（'openmodal'）.text（'Y:'+wscroll）；
国际单项体育联合会（wscroll startOn）{
$（'openmodal'）.fadeIn（100）；
}否则{
$（'openmodal'）。衰减（100）；
}
});
});
正文{
背景色：#fff；
}
div{
高度：1400px；/*仅用于测试目的！后面会有所不同*/
边框顶部：1个点黑色；
填充：50px；
利润率：20px 20px 40px；
背景色：#f0；
}
div#wrapper{高度：自动；边框：无；背景色：#fff；}
#开放式{
位置：固定；
背景色：#0F5F01；
光标：指针；
底部：20px；
左：6px；
宽度：60px；
边框：1px纯黑；
高度：27px；
填充：0；
显示：无；
z指数：999；
}
我的网站！
这是我的主要内容。
这是我的相关内容。

因此，我的想法是保持OpenModel可见，直到滚动经过“相关”内容div，而我似乎无法让它工作。所有DIV的高度都是可变的（除了#openmodal），我刚刚在这里为测试设置了高度

你知道怎么存档吗

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

var rangeLimit = rc - om;

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

我相信我终于找到了答案

所以基本上我不能得到隐藏元素的位置，我必须使用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>


测试1
$（窗口）。加载（函数（）{
var-startOn=5；
var rc=$（“#相关内容”）.position（）.top；
var om=$（'#openmodal'）.position（）.top；
$（'#openmodal'）.hide（）；
var rangeLimit=rc-om；
$（窗口）。滚动（函数（）{
var wscroll=$（this.scrollTop（）；
$（'openmodal'）.text（'Y:'+wscroll）；
国际单项体育联合会（wscroll startOn）{
$（'openmodal'）.fadeIn（500）；
}否则{
$（'openmodal'）。衰减（500）；
}
});
});
正文{
背景色：#fff；
}
div{
高度：1400px；/*仅用于测试目的！后面会有所不同*/
边框顶部：1个点黑色；
填充：50px；
利润率：20px 20px 40px；
背景色：#f0；
}
div#wrapper{高度：自动；边框：无；背景色：#fff；}
#开放式{
位置：固定；
背景色：#0F5F01；
光标：指针；
底部：20px；
左：6px；
宽度：60px；
边框：1px纯黑；
高度：27px；
填充：0；
z指数：999；
}
我的网站！
这是我的主要内容。
这是我的相关内容。