Page 1 of 1
[Solved] Fixed header and Notification bar
Posted: Thu Aug 04, 2016 11:31 am
by ahpongccx
I'm using opencart version 2.2.0.0 , wonder how to add or edit code for :
1) Fix header when scroll down ,
2) Promo wrapper on top page,
such as following website >>>
https://www.cottonink.co.id/shop/catalog/accessories/ , really need the support for this 2 edit , anyone can assist on this matter , much appreciate.
Re: Fixed header and Notification bar
Posted: Thu Aug 04, 2016 3:43 pm
by knowband.plugins
Don't you need this fixed header and promo wrapper?
What change do you want to make there?
Re: Fixed header and Notification bar
Posted: Thu Aug 04, 2016 11:37 pm
by straightlight
This topic will be moved to the Template Support section of the forum.
Re: Fixed header and Notification bar
Posted: Fri Aug 05, 2016 12:09 pm
by sarthakinfotech
hi
i found the solution for this requirement.
you may use jquery plungins for this
like you may find many solutions from here
http://www.jqueryrain.com/demo/jquery-fixed-header/
i have chosen this one
https://github.com/bigspotteddog/ScrollToFixed
steps to follow is as below;
1.download files from
https://github.com/bigspotteddog/ScrollToFixed link
2.place jquery-scrolltofixed-min.js at
catalog\view\javascript\jquery
3.open catalog\view\theme\default\template\common\header.tpl
goto
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
and add below code
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
</script>
4.now goto
and above this add below code
Code: Select all
<div id="mydiv" style="z-index:1;background-color:white;">
now goto
end of file and add below code
now you may test the code .
it will work as you want.
good day.
Re: Fixed header and Notification bar
Posted: Fri Aug 05, 2016 2:47 pm
by ahpongccx
@sarthakinfotech
This is awesome and it's works , thank you so much dule, much appreciate !!!!!!
Re: [Solved] Fixed header and Notification bar
Posted: Fri Aug 05, 2016 8:25 pm
by sarthakinfotech
hi
its really great.
thanks for the appreciation.
good day.
Re: Fixed header and Notification bar
Posted: Mon Aug 08, 2016 12:02 am
by avramalex111
sarthakinfotech wrote:hi
i found the solution for this requirement.
you may use jquery plungins for this
like you may find many solutions from here
http://www.jqueryrain.com/demo/jquery-fixed-header/
i have chosen this one
https://github.com/bigspotteddog/ScrollToFixed
steps to follow is as below;
1.download files from
https://github.com/bigspotteddog/ScrollToFixed link
2.place jquery-scrolltofixed-min.js at
catalog\view\javascript\jquery
3.open catalog\view\theme\default\template\common\header.tpl
goto
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
and add below code
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
</script>
4.now goto
and above this add below code
Code: Select all
<div id="mydiv" style="z-index:1;background-color:white;">
now goto
end of file and add below code
now you may test the code .
it will work as you want.
good day.
Thank you so much!!!
Re: [Solved] Fixed header and Notification bar
Posted: Wed Sep 07, 2016 1:23 am
by sarthakinfotech
Re: [Solved] Fixed header and Notification bar
Posted: Tue Nov 08, 2016 12:46 pm
by klyn05
This code works perfectly. Thank you so much!!!!
Re: [Solved] Fixed header and Notification bar
Posted: Sun Jan 22, 2017 1:10 am
by elsker-min-mathilde
Thank you mate! Works like a charm
Re: [Solved] Fixed header and Notification bar
Posted: Tue May 16, 2017 5:36 am
by Gr3nT
Best Fix. Thanks
Re: [Solved] Fixed header and Notification bar
Posted: Fri May 19, 2017 12:00 pm
by viethemes
I have made a OCMOD extension according to the sarthakinfotech's sarthakinfotech. You can download it here
https://www.dropbox.com/s/4cyc4a97ox6zn ... d.xml?dl=0. This will prevent from loosing the change when you update OpenCart
Re: [Solved] Fixed header and Notification bar
Posted: Tue Apr 03, 2018 8:45 pm
by ashacms
hi ,
i am working with opencart 3.0.2.0 . I have checked the idea of @sarthakinfotech , but it doesn't work for me.
Do any body know other idea to fix header in opencart 3 ?
thank you
Re: [Solved] Fixed header and Notification bar
Posted: Tue Apr 03, 2018 10:06 pm
by straightlight
ashacms wrote: ↑Tue Apr 03, 2018 8:45 pm
hi ,
i am working with opencart 3.0.2.0 . I have checked the idea of @sarthakinfotech , but
it doesn't work for me.
Do any body know other idea to fix header in opencart 3 ?
thank you
Then, you are not posting in the right forum section. However, since the changes above involves editing HTML / JS content, then you would need to clear your OC cache from the OC admin to reflect the change:
viewtopic.php?f=176&p=718325#p718325 .
Re: Fixed header and Notification bar
Posted: Wed May 15, 2019 10:43 am
by imanaba
sarthakinfotech wrote: ↑Fri Aug 05, 2016 12:09 pm
hi
i found the solution for this requirement.
you may use jquery plungins for this
like you may find many solutions from here
http://www.jqueryrain.com/demo/jquery-fixed-header/
i have chosen this one
https://github.com/bigspotteddog/ScrollToFixed
steps to follow is as below;
1.download files from
https://github.com/bigspotteddog/ScrollToFixed link
2.place jquery-scrolltofixed-min.js at
catalog\view\javascript\jquery
3.open catalog\view\theme\default\template\common\header.tpl
goto
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
and add below code
Code: Select all
<script src="catalog/view/javascript/jquery/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
</script>
4.now goto
and above this add below code
Code: Select all
<div id="mydiv" style="z-index:1;background-color:white;">
now goto
end of file and add below code
now you may test the code .
it will work as you want.
good day.
this works on theme pav protector ?