スティッキー広告をjQueryを使って実装してみる！

All

2018.02.052019.03.07

Sticky Ad

今回はスティッキー広告ってものを作ってみました。なんで作ったかって…それは。。。どうやって作っているか気になったからです。また、記事を見てくれている方に広告事態も見てもらえる確率が上がるかも。ということで実装してみました！コードは下記になります。

HTML
&lt;div class="sticky" style="position:relative;"&gt;
 &lt;span class="batu" style="display:brock;padding:0.5px 5.5px 0.5px 5.5px;background:#000000;color:white;border-radius:50%;position:absolute;top:5%;left:5%;z-index:1;"&gt;&lt;b&gt;×&lt;/span&gt;
//移動させたい広告を入れる！
 &lt;/div&gt;

HTML

<divclass="sticky"style="position:relative;">

<spanclass="batu"style="display:brock;padding:0.5px 5.5px 0.5px 5.5px;background:#000000;color:white;border-radius:50%;position:absolute;top:5%;left:5%;z-index:1;"><b>×</span>

//移動させたい広告を入れる！

</div>

<span class=”batu” ….>、×で広告に自作のバツボタンを設置して邪魔な時はそれを押して消せるようには工夫しました。×ボタンに効くjQueryは下記になります。

jQuery
$('.batu').on('click',function(){
     $('.sticky').css({'display':'none'});
});

jQuery

$('.batu').on('click',function(){

$('.sticky').css({'display':'none'});

});

上記のコードは×ボタンを押すと、広告の要素を非表示にしてあげています。簡単ですね！

続いて本題の、スティッキー広告。スティッキーとは英語で

ねばねばする、べとつく、粘着する、ねばねばしたものがついた、どろどろの

という意味らしく、たしかにそんな広告だなって思いました(笑)

コードは下記になります。

jQuery

var initPosition = $(".sticky").offset().top;
console.log(initPosition);
$(window).scroll(function(){
         var scroll = $(document).scrollTop();
　　　　　　　　console.log(scroll);
         var movePosition = initPosition + scroll + "px";
         console.log(movePosition);
   $(".sticky").animate({ 
       top : movePosition}, {
       duration : 250,queue : false
      });
 });

jQuery

varinitPosition=$(".sticky").offset().top;

console.log(initPosition);

$(window).scroll(function(){

varscroll=$(document).scrollTop();

　　　　　　　　console.log(scroll);

varmovePosition=initPosition+scroll+"px";

console.log(movePosition);

$(".sticky").animate({

top:movePosition},{

duration:250,queue:false

});

上記のコードは何をしているか、順番を追って実際デベロッパーツールをconsole.log()で確認しながらみてみてください！ざっくりやっていることをかいてしまうと、topからどの位置にその要素があるかを調べて、window.scrollした時にその要素がどの位置にくるか。また、何秒で追従するかってことを指定してあげてます。ポイントとしては、CSSでposition:relative;にしてあげてるとこぐらいかと思います！

広告を追従させてあげるってことをしているのですが、ユーザーが見にくい場合、消させてあげるって処理を組むのも必要ですね。。ぜひ、参考に画面がスクロールした時の処理を作ってみてください。