僅顯示一次滑入橫幅

當用戶滾動瀏覽ID爲#last的元素時，下面的函數會引入滑入橫幅。僅顯示一次滑入橫幅

該橫幅上有一個.close按鈕。但是一旦橫幅被關閉，用戶離開並返回橫幅再次出現。

如何修改代碼以便瀏覽器記住橫幅已關閉並且不再顯示它？（直到cookies被清除）

謝謝。

的旗幟，是實現如下所示本網站上：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(); 
    }); 
});

來源

2017-01-27 Adrian C Black

它必須是餅乾嗎？國際海事組織，使用本地存儲或會話存儲將是一個更簡單/更乾淨的解如果它必須是一個cookie，你應該看看[this]（http://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery）受保護的StackOverflow。 –

沒關係。只要點擊關閉按鈕，橫幅不會再顯示 –

$(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

來源

2017-01-27 16:48:22 Kejt

我不認爲您的解決方案曾設置localStorage項目。 –

有沒有什麼新點子？你的解決方案使橫幅也顯示出來。 –

給我一秒鐘，我會用codePen檢查它:) – Kejt

$(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 
     }); 

    } 

});

上面的代碼允許您設置sliderVersion數量上localStorage關閉slider--時，這將阻止其用戶再次打開，除非你增加你的代碼的滑蓋版。或者，如果您只希望瀏覽器記住用戶在會話期間關閉了滑塊（而不是所有時間或直到您增加滑塊版本），您還可以利用使用類似API的sessionStoragelocalStorage，但只要瀏覽器處於打開狀態 - 只要它們關閉瀏覽器並重新打開，sessionStorage將被清除。

來源

2017-01-27 18:21:36

現在，橫幅根本不顯示。我在[本頁]上有你的代碼（https://www.bps-world.com/） –

@AdrianCBlack - 我的壞 - 更新 - 現在試試。 –

謝謝，但仍然無法正常工作。橫幅根本沒有出現。它在這裏實施：（https://www.bps-world.com/） –

僅顯示一次滑入橫幅

回答

相關問題