jquery div隐藏/显示在滚动距离

这个div应该只显示滚动后270px，不能得到它的工作。 Theres里面还有一些东西，但是这不应该改变任何东西。jquery div隐藏/显示在滚动距离

HTML：

<script src="Jquery.js"></script> 
<div id="Movingmenu"></div>

CSS：

#Movingmenu { 
    position: fixed; 
    top: 10%; 
    width: 5%; 
    height: 10%; 
    left: 7.5%; 
    z-index: 100; 
    background: #989898; 
    transition: left 0.3s ease-in-out, 
       width 0.3s ease-in-out, 
       height 0.3s ease-in-out; 
    display: none; 
}

JQuery的：

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 270px) { 
    $('#Movingmenu').fadeIn(); 
    } else { 
    $('#Movingmeny').fadeOut(); 
    } 
});

来源

2017-08-07 Crispybagel

你改变什么，如果'如果（Y> 270px）''到IF（Y> 270）'？你也有一个在你的else语句中的类型，把'$（'＃Movingmeny'）'改成'$（'＃Movingmenu'）' –

你当前打印270px作为一个字符串，这意味着为了使它工作，你需要把它放在引号中。

if (y > "270px")

或者只是删除px一起

if (y > 270)

jQuery不会在PX所有测量反正，除非你告诉它，否则。例如：

if (y > "10%")

来源

2017-08-07 16:47:49 Crashtor

请改变这个

if(y > 270px)

到

if(y > 270)

$(document).scroll(function() { 
 
     var y = $(this).scrollTop(); 
 
     if (y > 270) { 
 
      $('#Movingmenu').fadeIn(); 
 
     } 
 
     else { 
 
      $('#Movingmenu').fadeOut(); 
 
     } 
 
    });

#Movingmenu { 
 
     position: fixed; 
 
     top: 10%; 
 
     width: 5%; 
 
     height: 10%; 
 
     left: 14.5%; 
 
     z-index: 100; 
 
     background: #989898; 
 
     transition: left 0.3s ease-in-out, 
 
     width 0.3s ease-in-out, 
 
     height 0.3s ease-in-out; 
 
     display: none; 
 
    } 
 

 
    #MovingmenuTest { 
 
     top: 10%; 
 
     width: 12%; 
 
     height: 1000px; 
 
     left: 7.5%; 
 
     z-index: 100; 
 
     background: #989898; 
 
     transition: left 0.3s ease-in-out, 
 
     width 0.3s ease-in-out, 
 
     height 0.3s ease-in-out; 
 
     display: block; 
 
     border: 1px solid #ccc; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Movingmenu">Main Div</div> 
 
<div id="MovingmenuTest">This is test check</div>

来源

2017-08-07 16:48:50

改变了这些，但它似乎并不奏效：/双重检查了一切，但仍然没有。 – Crispybagel

查看我的更新回答 –

试试这个：

演示：https://output.jsbin.com/wumuzasudi

#Movingmenu { 
 
    position: fixed; 
 
    top: 10%; 
 
    width: 5%; 
 
    height: 10%; 
 
    left: 7.5%; 
 
    z-index: 100; 
 
    background: #989898; 
 
    transition: left 0.3s ease-in-out, 
 
    width 0.3s ease-in-out, 
 
    height 0.3s ease-in-out; 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 
    if(y > 270) { 
 
    $('#Movingmenu').fadeIn(); 
 
    } else { 
 
    $('#Movingmenu').fadeOut(); 
 
    } 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<div id="Movingmenu">Hello World</div> 
 
<p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
</body> 
 
</html>

来源

2017-08-07 16:51:04

jquery div隐藏/显示在滚动距离

回答

相关问题