Divsはいつでも表示されます。ユーザーのスクロールは表示されません。

Question

私のポートフォリオWebサイトで作業しています。私は棒グラフにいくつか問題があります。私はそれがスクロールの表示に来るときに表示されるように設定しようとしています。これまでのところ、正しく動作するようにエフェクトを実現できましたが、ユーザーがスクロールするとすぐに表示されます。私は間違って何をしていますか？また、私はLiveQueryというWebサイトのプラグインを使用していることに注意してください。

HTML：

<div id="section-three"> 
     <div id="web-head"> 
      <h2>Web Development</h2> 
      <br> 
      <p><i>Code, code, and more code!</i></p> 
     </div> 
     <div id="web-graph"> 
      <div id="html-bar"> 
       <p>HTML</p> 
       <div id="html"> 
       </div> 
       <div class="clear"></div> 
      </div> 

      <div id="css-bar"> 
       <p>CSS</p> 
       <div id="css"> 
       </div> 
       <div class="clear"></div> 
      </div> 

      <div id="jq-bar"> 
       <p>JQuery/JavaScript</p> 
       <div id="jq"> 
       </div> 
       <div class="clear"></div> 
      </div> 
     </div> 
    </div> 

CSS：

/*SECTION THREE CODE*/ 

#section-three { 
    min-width: 100vw; 
    width: 100%; 
    min-height: 500px; 
    height: 100%; 
    background-color: #000000; 
    overflow: hidden; 
    text-align: center; 
} 

#web-head { 
    max-width: 70vw; 
    width: 100%; 
    min-height: 100px; 
    height: 100%; 
    margin-top: 2%; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
} 

#web-head h2 { 
    font-weight: normal; 
} 

#web-head p { 
    color: #808080; 
} 

#web-graph { 
    min-width: 85vw; 
    width: 100%; 
    min-height: 300px; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
} 

#web-graph p { 
    float: left; 
    max-width: 14vw; 
    width: 100%; 
    min-height: 50px; 
    height: 100%; 
    margin-left: 2%; 
    margin-top: 37.5px; 
    color: white; 
} 

#html-bar { 
    flex: 1; 
} 

#html { 
    min-height: 50px; 
    height: 100%; 
    max-width: 70vw; 
    width: 0; 
    float: left; 
    margin-top: 25px; 
} 

#html.active { 
    background-color: #808080; 
    transition: all ease-in-out 1s; 
    min-height: 50px; 
    height: 100%; 
    max-width: 70vw; 
    width: 70%; 
    float: left; 
    margin-top: 25px; 
} 

#css-bar { 
    flex: 1; 
} 

#css { 
    min-height: 50px; 
    height: 100%; 
    max-width: 70vw; 
    width: 0; 
    float: left; 
    margin-top: 25px; 
} 

#css.active { 
    background-color: #808080; 
    transition: all ease-in-out 1s; 
    min-height: 50px; 
    height: 100%; 
    max-width: 65vw; 
    width: 65%; 
    float: left; 
    margin-top: 25px; 
} 

#jq-bar { 
    flex: 1; 
} 

#jq { 
    min-height: 50px; 
    height: 100%; 
    max-width: 70vw; 
    width: 0; 
    float: left; 
    margin-top: 25px; 
} 

#jq.active { 
    background-color: #808080; 
    transition: all ease-in-out 1s; 
    min-height: 40px; 
    height: 100%; 
    max-width: 35vw; 
    width: 35%; 
    float: left; 
    margin-top: 25px; 
} 

はJQuery：

$(document).ready(function() { 
    $('#jq-bar:visible').livequery(function() { 
     $('#html').addClass('active'); 
     $('#css').addClass('active'); 
     $('#jq').addClass('active'); 
    })    
}); 

私も、私が以前にリンクしようとしたことに注意する必要がありますたびのdivまたはアイテムと特定のIDまたはクラスが示された場合、それは関数をトリガーしますが、残念ながらまだ機能しませんでした。誰かが私を正しい方向に向けることができれば、私は非常に感謝しています。ありがとうございました！

Answer 1

あなたのセレクタはすぐに、ページの読み込みの要素を選択：臆面もなくW3Cから盗ま

$(document).ready(function() { 
    $('#jq-bar:visible') 

：

の定義および使用方法：目に見えるセレクタは が現在表示されていることをすべての要素を選択します。ディスプレイに
セット：なし0
隠れた親要素に設定=「隠れた」
幅と高タイプ
フォーム要素（これはまた、子要素を非表示）

可視要素ではない要素であります

何かが見えるときには、スクロールトップのようなものを使ってクラスを初期化することができます。