CMS Development

sberry11
Top Contributor

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

I am designing a page that will have our company goals listed. I would like a left side navigation with our three goals. When you click a goal I would like it to scroll to the anchor on the same page. The idea is so the viewer can look at all three goals without leaving the page or scrolling. I would like the side navigation to be always visible no matter where the page is scrolled to.

 

1. Can I do this in HS?

2. Should I use a menu or rich text? (Can I make rich text sticky?)

 

I can get anchors to work with rich text, but not in a menu so far. Advice is appreciated.

 

Sarah

0 Upvotes
1 Accepted solution
subin
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

@sberry11 Its possible to do the sticky function, i have done it for some pages, i think you need a sticky menu left and scrolling text fields right. 

You can try Stickykit  jquery plugin

 

Thanks

View solution in original post

0 Upvotes
5 Replies 5
subin
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

@sberry11 Its possible to do the sticky function, i have done it for some pages, i think you need a sticky menu left and scrolling text fields right. 

You can try Stickykit  jquery plugin

 

Thanks

0 Upvotes
sberry11
Top Contributor

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

Thank you this looks like exactly what I need. This is the first time I've ever done what you mention. Could you point me in a direction of where to insert the code?

 

I appreciate your help,

Sarah

0 Upvotes
subin
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

use

jQuery( document ).ready(function() {
if ( $(window).width() > 739) {      
    
    jQuery('#pillar-sidebar-stick').stick_in_parent({
    	'parent': jQuery('.pillar-stick'),
		'offset_top': 100
	}).on('sticky_kit:bottom', function(e) {
		jQuery(this).parent().css('position', 'static');
	}).on('sticky_kit:unbottom', function(e) {
		jQuery(this).parent().css('position', 'relative');
	});
} 
});
0 Upvotes
sberry11
Top Contributor

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

Thank you so much and I'm sorry for the basic questions. I've never installed code in HS before. You are right that I would like the left menu to be sticky with the right scrolling. I'm missing something as it isn't working yet. This is what I've done:

 

1. Create coded file (Sticky_Menu.js)

2. Pasted in the code you gave me above

3. Got public URL

4. Pasted into page head: <script type="text/javascript" src="[get_public_template_url('Custom/page/Eagle_Parallax_2017/Sticky_Menu.js')]"> </script>

 

Currently, I have a text box with links to my page anchors. Does it have to be a menu module?

 

Thanks a bunch,

Sarah

0 Upvotes
subin
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Sticky Side Menu (with page not site nav) and anchor links

SOLVE

@sberry11 for the floating box you have to give the Parent div class and the floating box class. its hard to mention you by texting/commenting.you need to study the code i have given

 

Thanks

0 Upvotes