• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

Float a menu in an bootrap page

We have a page on a Bootstrap site which features a menu on the left.  Currently the menu is fixed in that it scrolls up and off the screen as the user scrolls down the page.  We want the menu to instead "float" and stay visible as the user scrolls up and down the page.

Screenshot
0
canuckconsulting
Asked:
canuckconsulting
  • 2
1 Solution
 
lenamtlCommented:
For Bootstrap you can use affix
https://getbootstrap.com/docs/3.3/javascript/#affix

You will need to adjust the value as this example is for a top menu...
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  the code menu here
</div>

Open in new window


Here is an example for left menu
https://www.bootply.com/DhiVvljBNe#

Or you will need to use a JS script (there are plenty of Sticky srcipts)

here the one I use
General use
http://leafo.net/sticky-kit/

General use
https://github.com/garand/sticky

This one is new and is for panel
https://github.com/faisalman/sticklr-js
1
 
lenamtlCommented:
I have provided a working solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now