Run jquery slidedown only once per session

Question

The function below shows the notification bar when a user visits a page. The toolbar slides down from the top of the window, discarding the contents of the page.

This is normal, but the effect becomes annoying when you visit more pages. What I'm trying to accomplish: slide the notification bar only the first time a user interacts with the site. After the notification is first displayed, if the user refreshes the page or visits other pages of the site, the notification bar is displayed instantly without a sliding effect.

I should probably use SessionStorage for this, just not quite right.

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

Answer 1

As you mentioned sessionStorage, it's pretty easy to use it to save a flag that tells you that slideDown has already happened or not. You can then use this flag to make sure it does not happen again.

Inside, you shift the code:

// 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
} 

How sessionStorage works :

A page session lasts as long as the browser is open and will survive a page reload and restore. Opening the page in a new tab or window will initiate a new session that is different from how the session cookies work.

Answer 2

You need to save information that the slide animation has already been completed, and in your code you need to put it conditionally, for example

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

: querystring URL (append? skipAnimation = true ) . Querystring , jquery. .