Jump to content

Fixed position on right column - Scrolling issue


5haun
 Share

Recommended Posts

Hi all

Have a look here http://www.saltshop.gourmetsalt.co.za/index.php

I have got a position: fixed; on my "right_column". I would like to stop it from scrolling with the page at a certain point. (As you can see it overlaps the menu, header etc.)

When the top of the "right_column" div reaches the "horizontalmenu" div, I want it to stop scrolling and become static... or something like that.
 

Does anybody know a jQuery method or something to do this?

Thank you!

Share this post


Link to post
Share on other sites

I did this in header.tpl

</script>
<script type="text/javascript" src="themes/default/js/stickyfloat.js">
$( document ).ready(function() { $('#right_column').stickyfloat( {duration: 400} ); });
</script>

Errors:

<br />
<b>Fatal error</b>: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template &amp;quot;/home/gourmkdu/saltshop/themes/default/header.tpl&amp;quot; on line 55 &amp;quot;$( document ).ready(function() { $('#right_column').stickyfloat( {duration: 400} ); });&amp;quot; - Unexpected &amp;quot;: &amp;quot;, expected one of: &amp;quot;}&amp;quot; , &amp;quot; &amp;quot; , ATTR' in /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php:667
Stack trace:
#0 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templateparser.php(3144): Smarty_Internal_TemplateCompilerBase-&gt;trigger_template_error()
#1 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templateparser.php(3209): Smarty_Internal_Templateparser-&gt;yy_syntax_error(2, ': ')
#2 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(105): Smarty_Internal_Templateparser-&gt;doParse(2, ': ')
#3 /home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php(206): Smarty_Internal_Sma in
<b>/home/gourmkdu/saltshop/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php</b> on line <b>667</b><br />

Share this post


Link to post
Share on other sites

It's not working because you call the jquery object before it is loaded.

 

<script type="text/javascript" src="themes/default/js/stickyfloat.js">
        $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); });
        
        
</script>

 

should go after the jquery script.

 

Regards.

Robin.

The CartExpert Team

Edited by CartExpert.net (see edit history)

Share this post


Link to post
Share on other sites

  • 11 months later...

I am using prestashop 1.06

I tried to follow the above instructions in order to have a sticky column but it didn't work. What I want to achieve actually is in the category page, I want when I scroll down the product filter box to be sticky.

So what I did.

 - I uploaded the stickyfloat.js in /themes/mytheme/js folder

 - Opened the /themes/mytheme/header.tpl and I edited like this:

<html lang="{$lang_iso}">
	<head>
       {literal}

    <script type="text/javascript" src="themes/mytheme/js/stickyfloat.js">
        $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); });
        </script>
{/literal}
	
	

Still is not working...

Do I miss something?

Thank you in advance

Share this post


Link to post
Share on other sites

I am using prestashop 1.06

I tried to follow the above instructions in order to have a sticky column but it didn't work. What I want to achieve actually is in the category page, I want when I scroll down the product filter box to be sticky.

So what I did.

 - I uploaded the stickyfloat.js in /themes/mytheme/js folder

 - Opened the /themes/mytheme/header.tpl and I edited like this:

<html lang="{$lang_iso}">
	<head>
       {literal}

    <script type="text/javascript" src="themes/mytheme/js/stickyfloat.js">
        $( document ).ready(function() { $('#right_column').stickyfloat( {duration: 0}); });
        </script>
{/literal}
	
	

Still is not working...

Do I miss something?

Thank you in advance

 

can you share url to shop where you use this code? cases like this need an inspection

Share this post


Link to post
Share on other sites

  • 5 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More