Sticky Item Loses Class If Back Button on Browser is Clicked

I’m using jQuery to create a sticky class once a header item is scrolling. The header item includes a logo and main menu. When the item is scrolled/fixed in position, the background color changes from transparent to black. Here’s the prob:

Let’s say the user scrolls and clicks a menu link item. Then the user decides to use their browser back button to return. The header item not only loses it’s sticky class but also loses the background color. Is there any way to fix this issue?

Code:
var headerHeight = $(‘header-item’).outerHeight();
$(window).on(‘scroll’, function () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$(’.head-header’).removeClass(‘sticky-header’);
}
else {
$(’.head-header’).addClass(‘sticky-header’);
}
});

If I’m thinking of this right, I need to find the position of the element ‘.head-header’. If the element’s position from the top of the page is great than 1, then force the class ‘sticky-header’ to be applied. Unless someone else can think of another solution?

1 Like

I am assuming that as the back arrow brings you back to the page with the header and menu that the menu selection is loading a new page into the browser.
What I believe is happening is that the header page is being reloaded and the js files are being loaded and executed which probably runs an initialisation function.
That being so I would try storing the header element in local storage in the menu click handler.
During page initialisation or after page load try to get the stored header element. If it is there, replace the existing header element with the stored header element. Then remove it from localStorage or at least set it to an empty string.
LocalStorage persists even when the browser is closed.

1 Like

You assume correct.
I’ll see if I can figure out the usage of localStorage.

Thank you for the suggestion.

You could just use position:sticky instead and then it will always be sticky without js. Of course if you want to change the color etc then you will still need JS but the header will remain sticky either way.

Here’s a demo from something else that shows a position:sticky element getting a class added to change color.

If you fork that codepen and then run in ‘debug mode’ from the codepen menu you can test the back button from the link that is in the middle of that page.

That demo actually stays as it should when you return even with the color highlighted but that may just be because the code is in the page and not linked to jquery etc.

The point I was making is that it will still be sticky whatever :slight_smile:

Hello, PaulOB.
That’s actually a great idea.However, I did change my code a little bit, which seems to have fixed the problem:

jQuery(window).scroll(function() {
	var scroll = jQuery(window).scrollTop();
	if (scroll >= 55) {
	jQuery(".psheader").addClass("sticky-header");
	}
	else{
	jQuery(".psheader").removeClass("sticky-header");
	}
	});

And then the CSS:

.psheader{background:transparent;-webkit-transition: background-color 2s ease-out;-moz-transition: background-color 2s ease-out;-o-transition: background-color 2s ease-out;transition: background-color 2s ease-out;}
.psheader.sticky-header {
	background-color: #000000!important;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
	box-shadow:0px 9px 6px -9px rgb(0 0 0 / 30%);
}

I plan on making more mods to the CSS to shrink the container, text and logo. But at least this works.

Thank you for your input!

1 Like

You don’t need those prefixes for the transition property anymore. They are just dead weight :wink:

Thank you for the reminder, PaulOB. Force of habit.

1 Like