jQuery スクロールに連動させて要素を囲みたいです

Question

###前提・実現したいこと
初歩的な質問で申し訳ありません。
ある要素を決まった高さ分スクロールした後、aタグで囲みたいのですが
書き方が分からず困っています。

●wrapの部分→スクロール毎に何重にもaタグで囲まれてしまう。
●unwrapの部分→ページ読み込み時はaタグが無いため、その親要素が消えてしまう。

※aタグの親要素はスクロールで、固定するようにcssの指定を書いているので
position: fixed;の場合にaタグで囲むという書き方も検討しています。

###該当のソースコード

	var test = $('#test');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 550) {
			test.wrap("<a href='#'></a>");
		} else {
			test.unwrap();
		}
	});

Answer 1

これで問題はなくなると思います。

$(function() {
	var test = $('#test');
	var height = 550;
	var wrapped = false;

    $(window).scroll(function () {
    	var scrollTop = $(this).scrollTop();

    	if (scrollTop > height && ! wrapped) {
            test.wrap("<a href='#'></a>");
            wrapped = true;
        } else if (scrollTop <= height && wrapped) {
            test.unwrap();
            wrapped = false;
        }
    });
});

Comments

[asako-]

できました！どうもありがとうございました！！

Answer 2

HTMLがどうなっているのか分からないので最適か否か判断できかねますが、フラグなどを用いてはいかがでしょう。
囲んだ時にはフラグを立てる（もしくは立てない）とし、囲まないor囲みを外す時はフラグを変更する。
その他、DOMを取得し判断するやcookieを使うなどありますが、一番手っ取り早い

Comments

[asako-]

なるほどです。フラグを立てる方法で試してみます。どうもありがとうございます。