Question

当用户滚动到页面上的特定位置（向下900像素）然后在特定位置（1800像素向下）消失时，我想要显示div。我有一个有效的解决方案，但是当用户向上滚动时，它会在初始出现点（距离顶部900像素）之后中断。

此时它不再消失。总而言之，我需要帮助修改我的代码，使div在传递出现的原始点后再次消失。

以下是我的测试页的链接：http://jltest.biz/test-1

以下是我的代码：

var startY = 900;
var stopY = 1800;

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
         if( $(window).scrollTop() > stopY ){
         $('.fixedDiv').fadeOut("slow");
   }
   else
   {  $('.fixedDiv').fadeIn("slow"); }
}
}

checkY();

感谢您的时间！

Answer 1

你在if语句中登录时出错，导致它无法正常工作检查

var startY = 900;
var stopY = 1800;

$(window).scroll(function(){
    checkY();
});

function checkY()
{
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
    {    
         $('.fixedDiv').fadeOut("slow");
    }
    else
    {

         $('.fixedDiv').fadeOut("slow");
    }
}

checkY();

同时检查http://jsfiddle.net/gLWxF/

我希望这可以帮助:)

Answer 2

而不是$(window).scrollTop() > startY使用$(window).scrollTop() >= startY有时当您快速滚动时，它可能会跳过一个数字。

这确保了如果它大于或等于startY

Answer 3

当滚动点位于起始位置之前时，应触发淡出方法吗？所以我认为你需要改变你的运营商，如下所示。

function checkY(){
    if( $(window).scrollTop() < startY ){
         if( $(window).scrollTop() > stopY ){
         $('.fixedDiv').fadeOut("slow");
   }
   else
   {  $('.fixedDiv').fadeIn("slow"); }
}

Answer 4

就这样做

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

var startY = 900;
var stopY = 1800;

$(window).scroll(function(){
    checkY();
});

function checkY()
{
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
    {
        console.log("Show"); 

        $('.foxedDiv').show(); 
    }
    else
    {
        console.log("Hide"); 
        $('.foxedDiv').hide();
    }
}

checkY();
</script>

<style> 
body
{
background:red;
    height:3000px; 
}
.foxedDiv
{
    display:none; 
    position:fixed; 
    top:50px; 
    right:10px; 
}
</style>
</head>
<body >
<div class="foxedDiv" >
    {loadposition moving}
	<br>
	
</div>
</body>
</html>

在网页上的特定范围内滚动时显示div

4 个答案: