Question

I’ve re-created a simple version of what I’m trying to do here (jsFiddle)

The header should stay where it is, and as you scroll down, when you click the header div it should scroll back up to the top, which it does. But if you focus on the input, or click the “logo”, the scroll should stay where it is.

With the first method I’ve tried is by using jQuery’s .css and setting the input/logo’s z-index as higher than the header, then getting the current scroll and keeping it at that position.

This sort of works, but once you click the input or logo, the header scroll no longer works.

I’ve also tried changing the logo/input jQuery to .animate with a slow speed, and it stays static for a couple seconds and then scrolls to the top even though I’ve not set it to do so. Here is the second example – jsFiddle

Doing it with the second example however doesn’t stop the other function from working.

Is there any reason for this behaviour that I’m missing?

Answer 1

You can prevent the click event from propagating to the header.

$("#logo, #input").click(function(e) {
    e.stopPropagation();
});