仅显示一次滑入式横幅

Question

当用户滚动经过 ID 为 #last 的元素时，下面的函数会引入一个滑入式横幅。

横幅有一个.close 按钮。但是，一旦横幅关闭并且用户导航离开并返回，横幅就会再次出现。

如何修改代码以使浏览器记住横幅已关闭并且不再显示？ （直到 cookie 被清除）

谢谢。

横幅在本网站上实现如下图所示：bps-world.com

$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });

    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});

Answer 1

$(function() {
var slided = localStorage.getItem("slided");
  console.log(slided);
if(!slided) {
  console.log("i'm here");
 $(window).scroll(function(){
    var distanceTop = $('#last').offset().top - $(window).height();
    if(!slided) {
      if($(window).scrollTop() > distanceTop) {
        $('#slidebox').animate({'right':'0px'},300);
        localStorage.setItem("slided",true);
        slided = true;
     }else
        $('#slidebox').stop(true).animate({'right':'-430px'},100);
     }

 });

 $('#slidebox .close').bind('click',function(){
    $(this).parent().remove();
 });
}
});

您可以使用 localStorage 来存储有关已出现幻灯片的信息。 那么你正在阅读它。

如果有存储的幻灯片已经出现的信息，我什至不会注册滚动事件监听器。

我已经修复了缺少设置变量的代码。 codePen here

Answer 2

$(document).ready(function () {

    var sliderVersion = 1;  // iterate this if you need to force the slider to be open (even if the user has closed it in the past)
    var sliderVersionFromLocalStorage = localStorage.get('sliderVersion');  // get the cached slider version from localStorage

    if (sliderVersionFromLocalStorage === null || sliderVersionFromLocalStorage === undefined || sliderVersionFromLocalStorage < sliderVersion) {  // if the user hasn't yet closed the current slider version, then launch it

        $(window).scroll(function(){
            var distanceTop = $('#last').offset().top - $(window).height();

            if  ($(window).scrollTop() > distanceTop)
                $('#slidebox').animate({'right':'0px'},300);
            else
                $('#slidebox').stop(true).animate({'right':'-430px'},100);
        });

        $('#slidebox .close').bind('click',function(){ 
            $(this).parent().remove();
            localStorage.set('sliderVersion', sliderVersion); // once the user closes the slider, we update the cached slider version so it won't open again
        });

    }

});

上述代码允许您在关闭滑块时在localStorage 上设置sliderVersion 数字——这将阻止它再次为用户打开，除非您在代码中增加滑块版本。

或者，如果您只想让浏览器记住用户在会话期间关闭了滑块（而不是一直或直到您增加滑块版本），您也可以利用使用类似 API 的 sessionStorage到localStorage，但只在浏览器打开时持续存在——如果他们关闭浏览器并重新打开，sessionStorage 将被清除。