每个会话只运行一次Jquery slideDown

Question

以下功能显示用户访问页面时的通知工具栏。工具栏从窗口顶部向下滑动，向下推送页面内容。

这没关系，但访问更多页面时效果会变得烦人。我想要完成的任务：仅在用户第一次与站点交互时向下滑动通知工具栏。首次显示通知后，如果用户刷新页面或访问其他网站页面，则会立即显示通知工具栏，不会产生下滑效果。

我应该为此使用SessionStorage，但事实并非如此。

$(function(){
$('#notification_toolbar').slideDown();
});

Answer 1

由于您已经提到过sessionStorage，因此可以很容易地使用它来保存一个标志，告诉您slideDown是否已经发生。然后你可以使用那个标志来确保它不会再发生。

在里面滑下代码：

// perform the slide down only if the slide down flag wasn't set
if(sessionStorage.getItem('hasSlideDown') !== 'yes') {  // check if slide down flag was set
    sessionStorage.setItem('hasSlideDown', 'yes');      // set the slide down flag
    $('#notification_toolbar').slideDown();             // perform the slide down
} 

sessionStorage如何运作：

  

只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话，这与会话cookie的工作方式不同。

Answer 2

您需要保留已经执行幻灯片动画的信息，并且在您的代码中需要像

一样放置条件

if (skipAnimation) {
  # put your code to show toolbar without slide animation here
}

您可以通过多种方式实现这一目标：使用url querystring（追加？skipAnimation = true到您的地址）或使用会话存储。查询字符串最简单，因为您可以使用jquery轻松读取它。会话存储可以为您的用户提供更好的体验。