Joomla Templates Club 406,261 posts

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#647034

Hi,
How can i make “sticky on scroll” to some modules position to sidebar 2

Please help…!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#647300

Hi

You can post your site’s URL here and tell me the module you want it sticky

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#649600

Please, i’m still working on localhost, kindly help me explain how to achieve it here

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#649650

Basically, you will need to add css style to keep the position of that module in a fixed position. Just like the way I suggested in this thread: http://www.joomlart.com/forums/topic/sticky-header-2/#post-575291

But pls notice that the element will be different – that’s why I asked for the URL of your site first to give exact suggestion.

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659700

Ok my site is faceramadan.com so I would like to apply it to both sidebars but pls what I actually want is to stick on scroll I.e the sidebars modules will stick when it reaches the top or header when scrolling the page

And pls how can I make the header to stick permanently presently it only sticks when scrolling the page back up but does not sticks when scrolling the page down kindly advise on what to do about this aswell

God bless you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#659703

<em>@qolby 486810 wrote:</em><blockquote>Ok my site is faceramadan.com</blockquote>

Your site requires login information to view :((

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659704

Use softlog as use name and 123456 as pass word pls I just add more message to my previous reply kindly check also
Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#659707

<em>@qolby 486810 wrote:</em><blockquote>Ok my site is faceramadan.com so I would like to apply it to both sidebars but pls what I actually want is to stick on scroll I.e the sidebars modules will stick when it reaches the top or header when scrolling the page

</blockquote>

Where, in/on your site, are there elements published to the sidebar position(s)?

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659714

the positions are as follow
Sidebar 2
js_side_frontpage_top
js_side_frontpage_bottom
js_side_frontpage

Thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#659715

<em>@qolby 486827 wrote:</em><blockquote>the positions are as follow
Sidebar 2
js_side_frontpage_top
js_side_frontpage_bottom
js_side_frontpage

Thanks</blockquote>

Are these published on your home page – or some other page(s) within your site?

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659717

<em>@TomC 486828 wrote:</em><blockquote>Are these published on your home page – or some other page(s) within your site?</blockquote>

they are published on home and some other pages but they are not published on landing page menu as you can see

thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#659789

This will require customisation on CSS and JS code. You can try with my tweak below:
– Go to file: root/templates/ja_social_ii/tpls/blocks/mainbody/one-sidebar-right.php

– Look for this code:


<!-- SIDEBAR RIGHT -->
<div class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


change it to:


<!-- SIDEBAR RIGHT -->
<div id="t3-sidebar" class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


– At the end of this file, add following code:


<script src="http://stickyjs.com/jquery.sticky.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#t3-sidebar").sticky({topSpacing:0});
});
</script>


– Go to file: root/templates/ja_social_ii/css/custom.css (create this file if it doesn’t exist)

add this css rule:


div#t3-sidebar-sticky-wrapper .t3-sidebar {
right: 30px;
}


[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659982

<em>@Saguaros 486885 wrote:</em><blockquote>This will require customisation on CSS and JS code. You can try with my tweak below:
– Go to file: root/templates/ja_social_ii/tpls/blocks/mainbody/one-sidebar-right.php

– Look for this code:


<!-- SIDEBAR RIGHT -->
<div class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


change it to:


<!-- SIDEBAR RIGHT -->
<div id="t3-sidebar" class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


– At the end of this file, add following code:


<script src="http://stickyjs.com/jquery.sticky.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#t3-sidebar").sticky({topSpacing:0});
});
</script>


– Go to file: root/templates/ja_social_ii/css/custom.css (create this file if it doesn’t exist)

add this css rule:


div#t3-sidebar-sticky-wrapper .t3-sidebar {
right: 30px;
}

</blockquote>

I tried as you told but does not work!

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#745139

<em>@Saguaros 486885 wrote:</em><blockquote>This will require customisation on CSS and JS code. You can try with my tweak below:
– Go to file: root/templates/ja_social_ii/tpls/blocks/mainbody/one-sidebar-right.php

– Look for this code:


<!-- SIDEBAR RIGHT -->
<div class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


change it to:


<!-- SIDEBAR RIGHT -->
<div id="t3-sidebar" class="t3-sidebar t3-sidebar-right col-xs-12 col-sm-4 col-md-3 <?php $this->_c($vars['sidebar']) ?>">
<jdoc:include type="modules" name="<?php $this->_p($vars['sidebar']) ?>" style="T3Xhtml" />
</div>
<!-- //SIDEBAR RIGHT -->


– At the end of this file, add following code:


<script src="http://stickyjs.com/jquery.sticky.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#t3-sidebar").sticky({topSpacing:0});
});
</script>


– Go to file: root/templates/ja_social_ii/css/custom.css (create this file if it doesn’t exist)

add this css rule:


div#t3-sidebar-sticky-wrapper .t3-sidebar {
right: 30px;
}

</blockquote>

I tried as you told but does not work!

[qolby Friend qolbyJoin date: August 2014Posts: 81Downloads:5Uploads:8]

#659985

i tried as you told but does not work!

[Author]

Posts