スクロールダウンするときに小さなウィンドウを作成する方法は？

Question

いくつかのピクセル数をスクロールダウンするときに表示される小さなウィンドウを作成する必要があります。

例はseen hereですが、時にはウィンドウが表示されない場合もありますので、例をキャプチャするscreen shotも提供します。

下から下にスクロールすると、右側から小さなウィンドウが出てきます。最初のリンクと同じように（閉じるボタンとすべてで）これを行う必要があります。

var amountScrolled2 = 3000; 
 

 
$(window).scroll(function() { 
 
    if ($(window).scrollTop() > amountScrolled2) { 
 
    $('div.banner').fadeIn('slow'); 
 
    } else { 
 
    $('div.banner').fadeOut('slow'); 
 
    } 
 
});

div.banner { 
 
    display: none; 
 
    width: 300px; 
 
    height: 400px; 
 
    background-color:white; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 0px; 
 
    bottom: 120px; 
 
    text-align: center; 
 
    padding: 0; 
 
    border:1px solid #ddd; 
 
    border-right:none; 
 
    padding:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="banner hidden-xs"> 
 
     <h3 style="color:black;font-size:22px;"><span class="blink"><b>DID YOU READ THIS?</b></span></h3> 
 
     <h3 style="color:black;text-align:left;font-size:20px;">New Cat Specie Found!</h3> 
 
     <p style="color:black;text-align:left;"><i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="" style="color:black;">READ MORE</a></p> 
 
     <p style="text-align:left;"><img src="images/professor1.jpg" class="img-circle" width="25" height="25"> John Wotson. Professor,<br>University of Moratuwa.</p> 
 
     
 
    </div>

私もcloseボタンを追加したい、との代わりにフェードのフェードインとフェードアウト、私が欲しい：

この

は、私はすでにウィンドウを作成するために書かれたものです右から開く/閉じるウィンドウ。ユーザーが閉じるボタンをクリックすると、スクロール位置に関係なく、バナーバナーは非表示のままになり、ページがリフレッシュされるまで保持されます。ユーザーがスクロールバックすると、バナーはしきい値スクロール位置に達すると自動的に非表示になり、ユーザーがスクロールダウンしても再び表示されます。

私はすでに何をしているかに基づいて、どうすればいいですか？

Answer 1

あなたのjsFiddleの例に基づいて、あなたが質問した機能を追加しました。次のコードは、これがどのように機能するかを示しています。

bannerは fixedポジショニングを使用していることを考えると

var amountScrolled2 = 300; 
 
var bannerClosed = false; 
 
var banner = $('div.banner'); 
 
var close = $("span#close"); 
 

 
$(window).scroll(function() { 
 
    if (!bannerClosed && !banner.hasClass('popout') && $(window).scrollTop() > amountScrolled2) { 
 
    \t banner.addClass('popout'); 
 
     banner.animate({ 
 
      right: 0 
 
     }, { 
 
      duration: 'slow', 
 
      complete: function() { 
 
       close.click(function() { 
 
        bannerClosed = true; 
 
       \t closeBanner(); 
 
       }); 
 
\t   } 
 
    \t }); 
 
    } else if (banner.hasClass('popout') && $(window).scrollTop() < amountScrolled2) { 
 
    \t closeBanner(); 
 
    } 
 
}); 
 

 
function closeBanner() { 
 
    banner.animate({ right: -340 }, 'fast'); 
 
    $(this).unbind("click"); 
 
    banner.removeClass('popout'); 
 
}

div.banner { 
 
    width: 300px; 
 
    height: 400px; 
 
    background-color:white; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: -340px; 
 
    bottom: 120px; 
 
    text-align: center; 
 
    padding: 0; 
 
    border:1px solid #ddd; 
 
    border-right:none; 
 
    padding:20px; 
 
} 
 

 
div.banner > span#close { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 5px; 
 
    color: red; 
 
} 
 

 
div.banner > span#close:hover { 
 
    background-color: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p> 
 
<p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p><p> 
 
sasasasas 
 
</p> 
 
<div class="banner hidden-xs"> 
 
     <span id="close">X</span> 
 
     <h3 style="color:black;font-size:22px;"><span class="blink"><b>DID YOU READ THIS?</b></span></h3> 
 
     <h3 style="color:black;text-align:left;font-size:20px;">New Cat Specie Found!</h3> 
 
     <p style="color:black;text-align:left;"><i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="" style="color:black;">READ MORE</a></p> 
 
     <p style="text-align:left;"><img src="images/professor1.jpg" class="img-circle" width="25" height="25"> John Wotson. Professor,<br>University of Moratuwa.</p> 
 

 
</div>

、それはフルスクリーンでの例を試してみた方が良いです - これを行うには、「フルページ」ボタンをクリックしてください。

更新jsFiddleはアクションで、このコードを示すこともあります。これが達成される方法https://jsfiddle.net/mgaskill/poss9x4o/

を？いくつかのステップがあります。まず、エフェクトの非同期性は、各スクロールイベントがエフェクトを効果的に中断（またはインターリーブ）することを意味するため、エフェクトが既に発生している間は発生しないようにすることが重要です。 popoutクラスを使用して、バナーがポップアウトされ、ユーザーに表示されることを示します。

次に、「閉じる」ボタンを「X」を含む単純なスパンとして追加し、閉じるボタンのように見えるようにスパンスタイルをカスタマイズします。これには、hoverスタイルを配置することも含まれ、これがアクティブな要素であることがユーザーに視覚的に示されます。

バナーのスタイルはわずかに変更され、バナーは表示されずにオフスクリーンになり、 'スライド'エフェクトを有効にしてディスプレイの切り替えを心配する必要もありません。最初のrightのバナーの位置が今度は-340pxであり、バナーは完全にオフスクリーンのままになります（幅に基づいて）

その後、イベントを処理します。 animate要素の最初の位置から "0"に遷移させる方法で、実際には画面の右側からバナーをスライドさせます。バナーが表示されたら、閉じるボタンのクリックハンドラをインストールします。

閉じるボタンハンドラは、バナーをすばやく右にスライドさせて非表示にします。さらに、クローズボタンクリックハンドラがアンインストール（クリーンアップ）され、popoutクラスがバナーから削除されます。

バナーが表示されている間にページがスクロールアップされると、ページがスクロールダウンされるまでバナーが再び非表示になります。しきい値に達するのに必要なスクロール量は、amountScrolled2変数に設定されています。ユーザーが 'X'をクリックしてバナーを閉じると、ページが更新されるまでスクロールしてもバナーが表示されなくなります。