jqueryなしの角度

Question

次のコードはJQueryを使用していますが、Angularのみを使用したいと思います。そして、私はそれをどうやってできるのか分かりません。ありがとう

var startProduct = $("#product-overview").position().top - 60; 
      var endProduct = $("#global-features").position().top + 150; 

      $(document).scroll(function() { 

       var y = $(this).scrollTop(); 

       if ($routeParams.section) { 
        $("#product-submenu").show(); 
       } else if (y > startProduct) { 
        $("#product-submenu").fadeIn(); 
       } else { 
        $("#product-submenu").hide(); 
       } 

       if (y > endProduct) { 
        $("#product-submenu").css("opacity", "0"); 
       } else { 
        $("#product-submenu").css("opacity", "1"); 
       } 

      }); 

Answer 1

$は多くのことのための単なるショートカットです。例えば$("#product-submenu")はdocument.getElementById("product-submenu")という短い形式です。

また、.css関数の場合、アクセサー関数jQueryではなく、document.getElementById("product-submenu").style.opacity = "1"を使用してCSSを更新する必要があります。

.show()と.hide()について、あなたはdocument.getElementById("product-submenu")はそれぞれ.style.display="block"と.style.display="none"続い使用することができます。

.fadeIn()については、もう少し作業が必要で、アプリケーションにどのように実装するかによって異なる場合があります。 fadeInのようなファンシーエフェクトを使用したい場合は、最初にjQueryをインクルードしたい場合がありますが、これが唯一のものであれば、要素の不透明度を変更するためのjavascript関数を書くことができます。フェーディン効果が必要ない場合は、上記のようにdisplay="block"を使用することができます。フェードインしない間は、エレメントが表示されます。