dynamic fixed header

[j3velez]

Hello, Im looking something like THIS header, when you scroll down the header appears dynamically (it's not fixed). I want to "transform" my header into another (or the same but with different design) when scroll down.

 

Do you know how to do it? or you know where can I find a module for this?

 

Regards

 

Jose Velez

[NemoPS]

Hi,

You just have to add "position:fixed" to the header section of your store (to the block you want to stick)

 

p.s. in the css, of course

Edited December 14, 2012 by Nemo1 (see edit history)

[j3velez]

Hi,

You just have to add "position:fixed" to the header section of your store (to the block you want to stick)

 

p.s. in the css, of course

Thanks for your answer but if you see the page (THIS) the header is not fixed. I dont want to use "position:fixed". I want to "transform" my header into another (or the same but with different design) when scroll down.

[NemoPS]

Right, i just checked it after scrolling and noticed it had position:fixed.

You'd need some javascript to do that. Ideally, with jQuery you'd target the page scroll, and add position:fixed when leaving the header out of sight.

 

This might help you: http://return-true.com/2010/04/scroll-activated-slide-down-header-with-jquery/

[j3velez]

Right, i just checked it after scrolling and noticed it had position:fixed.

You'd need some javascript to do that. Ideally, with jQuery you'd target the page scroll, and add position:fixed when leaving the header out of sight.

 

This might help you: http://return-true.c...er-with-jquery/

 

Thanks for your help, I'll check it.

[amr.rs]

I hope you want to do something like in this website mytechskool.com?

 

#hSlideContainer complete part form css and add the hsliderContainer div in the page template mostly in header section and this javascript

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">

$(function() {

var bar = $('#hSlideContainer');

var top = bar.css('top');

$(window).scroll(function() {

if($(this).scrollTop() > 250) {

bar.stop().animate({'top' : '0px'}, 0);

} else {

bar.stop().animate({'top' : top}, 0);

}

});

});

</script>

 

to make the header appear after you scroll down and to disappear if you scroll up.

[amr.rs]

When i edit the topmenu template and add the appropriate the problem is re-compiling the tpl file. When i select Force compile, i just receive an error 500 - means it couldn't pull the page after rebuilding. I also deleted the cache & compile folder in smarty so nothing is coming up from old cache.

 

Should i need to try the same from a fast internet connection ? i hope that won't make any sense.

 

Please let me know.

[vekia]

When i edit the topmenu template and add the appropriate the problem is re-compiling the tpl file. When i select Force compile, i just receive an error 500 - means it couldn't pull the page after rebuilding. I also deleted the cache & compile folder in smarty so nothing is coming up from old cache.

 

Should i need to try the same from a fast internet connection ? i hope that won't make any sense.

 

Please let me know.

 

you should check php error log why this error appeared, i think that the problem is with script. You paste script to the tpl file, am I right? If so, you should use {literal}{/literal} tags

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">

{literal}

$(function() {
var bar = $('#hSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 250) {
bar.stop().animate({'top' : '0px'}, 0);
} else {
bar.stop().animate({'top' : top}, 0);
}
});
});

{/literal}

</script>

[amr.rs]

you should check php error log why this error appeared, i think that the problem is with script. You paste script to the tpl file, am I right? If so, you should use {literal}{/literal} tags

 

Man! You are rocking. That's exactly the issue. So for all scripts i guess i've to add the literal smarty tag.

 

Awesome, Thanks man.

[vekia]

yes, if anywhere in thie script signs like { or } appear - you have to add {literal} {/literal} tags :-)