DOMのスクロール位置がxyzより大きい場合の表示要素

Question

スクロール位置が特定の高さより大きい場合、固定要素を表示します。ユーザーが、私は要素#trigger_lisaを表示したい700pxその後、大きい焦点を当てた場合、それを説明するには

$(document).scroll(function() { 
    if ($(document).scrollTop() > 700px) { 
     $('#trigger_lisa').css("display", "block"); 
    } 
}) 

：だから私はこれを実行しようとしました。私が "700px"のやり方を変えたのは変だけど、もっとうまくやれる方法は分かりません。

Answer 1

700pxを支援するための

おかげで構文エラーです。 "700px"は有効ですが間違っています。ちょうど700を使用してください。あなたは再びそれを非表示にする場合

ただし、ユーザーがスクロールバック、toggleを使用する場合：

$(document).scroll(function() { 
 
    $('#trigger_lisa').toggle($(document).scrollTop() > 700); 
 
});

body { 
 
    height: 10000px; 
 
} 
 
#trigger_lisa { 
 
    position: fixed; 
 
    top: 0; 
 
    background: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="trigger_lisa"></div>

Answer 2

あなたのコードが間違って表記、「PX」、このために必要とされていませんがあります「700」は数字でなければなりません。一般的なケースでは、あなたのコードは動作します：

$(document).scroll(function() { 
 
    if($(document).scrollTop()>700) 
 
    { 
 
     $('#trigger_lisa').css("display","block"); 
 
    } 
 
});

.wrapper { 
 
    height: 3000px; 
 
} 
 
#trigger_lisa { 
 
    display: none; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -10px; 
 
    margin-left: -50px; 
 
    width: 100px; 
 
    height: 20px; 
 
    background-color: #323232; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <div id="trigger_lisa"></div> 
 
</div>

https://jsfiddle.net/Romanzhivo/p7bcjvm4/1/