I am looking to create a smooth sliding effect for my header content (logo) to move to the left as the user scrolls, while leaving a fixed menu in place. Currently, I have managed to make the content disappear but the slide animation is not quite right - it appears more like an extended scroll than a true sliding effect.
What I aim to achieve is something similar to this example header:
As you can see in the example, when scrolling occurs, the header smoothly slides away to the left, revealing a fixed menu.
Below is the code I have been working with:
<script>
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#header_content").hide(300);
} else {
$("#header_content").show(300);
}
});
</script>
While this code successfully hides the div, it does not produce the desired sliding effect towards the left.