jqueryでスクロールをした際に要素を削除したい。

Question

jqueryの初心者です。
色々文献を調べながらHPを作成しています。
スクロールを下に下げた際にロゴが消えるようにしたいのですが
消えてくれません。

下記のコードでなにか問題はございますでしょうか？

ちなみに他のjqueryは動いておりますのでなにかコードに問題があると思います。
現在は、header footer いずれに実装しても消えることはありませんでした。

お手数をおかけいたしますが、ご教示のほどよろしくお願い致します。

 $(function(){
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
     ('div#header-logo').remove();
    }
  });
});

Answer 1

$ ('div#header-logo').remove();

これはheader-logoというidのついたdivを削除することで

$ ('div#header-logo').append();

これはheader-logoというidのついたdivに何かを追加することです。
そもそも削除してしまったのですから、追加もないでしょう。
表示/非表示で切り替えてはだめなのでしょうか？

どうしてもというなら

$('body').append($('<div id="header-logo">hoge</div>'));

のような処理をいれればよいでしょうけど
このままだと挿入されるのはbodyの最後になるので
なになにの前とか、相対的な位置が必要になるかもしれません

Answer 2

スクロールを下に下げたら非表示にすることは出来ました。
ただ、戻した時に要素が戻らない状態です。

申し訳ございませんが、引き続きよろしくお願い致します。

	$(window).on('scroll', function() {
 if ($(this).scrollTop() > 0) {
 $ ('div#header-logo').remove();
 } else {
  $ ('div#header-logo').append();
 }
 });

Comments

[yambejp]

こういうものはご自身の質問に追記して下さい