How to stop twitter bootstrap scrollspy at a certain distance? - javascript

Hey Im using bootstrap's scrollspy to have a sidenav move with my content. The problem is I have a massive footer and when the user keeps scrolling past the main body content, the sidenav keeps scrolling and overlaps the footer. Is there an easy work around for this?

Assuming that you already have your side nav setup and working with twitter bootstrap you would use the data-offset-bottom to stop it from scrolling in your footer. Heres an example:
<div id="leftnav" data-spy="affix" data-offset-top="149" data-offset-bottom="385">
You will have to play around with the numbers so that it works with the sizes of your footer so it will stop before it reaches the bottom. You can read about it here. Hope that helps.

Related

Navbar and slider layers difficulty

I'm having difficulty getting a navbar and a slider to work together. The problem is when it is in mobile view. If you click on the menu icon the menu item slide in from the side but the top ones are appearing stacked underneath the slideshow.
Here is a sample of it posted on my domain test page. http://ecfleming.com/test/index.html
I have tried using a z-index in the CSS as well as few other things. I suspect it might be something in the JavaScript, but I can not figure out what. Does anyone have any ideas of what I can try to fix this?
For a quick fix, you can add .cycle-slideshow { z-index:-1 }
Try not to hard code the height value of div id="header"
Fix the mobile view by removing the height 185px.

Bootstrap Affixed nav bar w/ parallax scrolling problems

Essentially my website has multiple parallax scrolling panels, so basically a picture embedded within a div element, and splitting between two of those panels, I have a navbar which I want to affix to the top of the screen... now I have that completed but the navbar isn't on the top most layer and all the other divs on the screen go on top of that, there is a "demo" or my site which you can see this actively happening. I'm not sure how to either move the rest of the elements down without messing up the parallax or bringing the z value of the navbar up above all other elements... Any help would greatly be appreciated!
(I've had this problem on other sites before I've created and I've never been able to figure it out)
My Website (Github.io) / demo
You can use the CSS z-index property to achieve what you're looking for.
Simply add a high z-index property value to the navbar selector, like as follows
.affix {
// pre-existing properties
z-index: 999;
}

Sticky Navgiation Problems

I was wondering if you could help.
I am currently putting together a site that requires a parallax scroll and sticky navigation.
The navigation must start below image 1 (Blue) and then stick to the top in a fixed format after you've scrolled past image 1(blue).
I have tried many options and at present, I have got the navigation to stick to the top and then reappear once image1 (Blue) has been passed - but it starts at the top.
I have tried some jQuery plugins and they have not worked, could it be the way I have got my script formatted? As some is embedded directly into the page and not an external file?
Here is my link: http://bella-web.co.uk/sticky-nav/
and would love some feedback as to how I am going to get this to work.
Thanks in advance,
Ben.
You should be able to add navigation menu that starts in the middle of the page and sticks when it reaches the top using the jQuery plugin jQuery Waypoints, the plugin doesn't just work out of the box, so please read the docs.

Why is my slider scrolling? How can I stop it from scrolling?

I am doing a website using a free slider from here. I want to use the slider with a nav bar at the top of the page. My problem is, whenever I add the navbar in to the page the slider begins to scroll up and down. If I remove my nav bar everything works fine. When the slider scrolls, only the arrow buttons and the page tabs at the bottom scroll but not the image. My website is MQMGaming.com. Is there anyway to keep the slider from scrolling so it is the same as without the nav bar?
Thanks in advance.
It's not the navigation itself causing the issue, it's the two br tags you have after the nav ends. If you remove them it works fine.

Why is half my webpage unclickable when I am using a stick up nav menu and how do I fix it?

I have created a menu on my website that is suppose to stick to the top of the screen as you scroll down the page, It works perfectly, but there is one problem. I cannot click any were on the top 50% of the screen making the website unusable. http://streamportal.comuv.com/StreamPortal/Test.html this is a test copy (not the true site). can someone take a look at this and tell me what to do? If you need any more info from me please let me know.
This is what I a using to make the menu stay stick while scrolling, thanks to the help of gfrobenius, `http://jsfiddle.net/wHF97/
Remove this:
<div style="height:1000px"> //Remove the height
</div>
It's the div after id="cssmenu"

Categories