スクロール距離のJquery div非表示/表示

このdivは、270pxをスクロールした後でのみ表示され、動作させることはできません。 divの中にもたくさんのものがありますが、実際には何も変えてはいけません。スクロール距離の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：あなたは現在、それはあなたが必要とする動作するために意味の文字列として270pxを印刷している

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

出典

2017-08-07 Crispybagel

あなたは 'の場合（Y> 270px）' '（Y> 270）であれば、'にを変更した場合は何？また、elseステートメントに型があり、 '$（ '＃Movingmeny'）'を '$（ '＃Movingmenu'）'に変更します。 –

引用符で囲みます。

if (y > "270px")

それとも

if (y > 270)

jqueryのは、ピクセル内のすべての測定はとにかくあなたがそうでなければ、それを教えてくれない場合を除き、すべて一緒にpxを削除します。

if (y > "10%")

出典

2017-08-07 16:47:49 Crashtor

これを試してみてください。この

if(y > 270px)

$(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>

if(y > 270)

へ

出典

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非表示/表示

答えて

関連する問題