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号码 - 除非您在代码中增加滑块版本，否则这将阻止用户再次打开它。

或者，如果您只希望浏览器记住用户在会话期间关闭滑块（而不是所有时间或直到您增加滑块版本），您还可以利用sessionStorage使用类似于localStorage的API，但只有在浏览器处于打开状态时才会保留 - 如果他们关闭浏览器并重新打开，sessionStorage将被清除。

仅显示滑入式横幅一次

2 个答案: