See the menu on the left, how do you stop it so that it doesn’t go over the footer when you scroll to the bottom of the page?
Investigate and find out.
It’s in a div with a unique id of “conf_form_tabs”
You’re likely to find a reference to that in one of the script files. It’s referenced in the configurator.js script file.
Search for conf_form_tabs, and discover that it’s assigned to a.formtabs
Where is formtabs used? It’s used in the same file in three different places:
[list][]1. where it’s set to null
[]2.It’s assigned to the “conf_form_tabs” div
[*]3. It’s referenced in the conf_nav_posit() function[/list]
You can get the code for that function by following the above investigation.
function conf_nav_posit(){var g=conf_getUIs().formbox;var e=conf_getUIs().formtabs;var d=$(window).scrollTop();var c=conf_getUIs().menubar.height();d+=c;var a=g.offset().top;var b=e.offset().top;var f=0;if(d-a>=0&&a+g.height()-d-e.height()>=0){if($.browser.msie&&$.browser.version<"7"){f=d-a;e.css("position","relative").css("top",f+"px")}else{e.css("position","fixed").css("top",c+"px")}}else{f=a+g.height()-d-e.height()<=0?g.height()-e.height():0;e.css("position","relative").css("top",f+"px")}}
That’s not very useful though, so here’s a version of it where I:
[list][]ran it through a javsacript beautifier
[]passed elements in to the function as arguments
[]renamed the variables to more meaningful names
[]and finished off by running it through www.jslint.com[/list]
function conf_nav_posit(nav, container, elementAboveContainer) {
var offsetTop = $(elementAboveContainer).height(),
scrollTop = $(window).scrollTop() + offsetTop,
topOfContainer = $(container).offset().top,
navPosition = 0;
if (scrollTop - topOfContainer >= 0 && topOfContainer + $(container).height() - scrollTop - $(nav).height() >= 0) {
if ($.browser.msie && $.browser.version < "7") {
navPosition = scrollTop - topOfContainer;
$(nav).css("position", "relative").css("top", navPosition + "px");
} else {
$(nav).css("position", "fixed").css("top", offsetTop + "px");
}
} else {
navPosition = topOfContainer + $(container).height() - scrollTop - $(nav).height() <= 0 ? $(container).height() - $(nav).height() : 0;
$(nav).css("position", "relative").css("top", navPosition + "px");
}
}
Beware: code is untested, here be dragons, do not pass GO, etc.
Can you give me an html sample? What’s the div called?! I need the menu to act just like the one on the page I linked to where it starts out in an absolute position and then switches to fixed and then stops at a certain spot from the bottom of the page.
Here is the current code I use which does everything but stop at the bottom before it overlaps the footer:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test floating menu</title>
<style type="text/css">
div.banner {
margin: 0;
position: absolute;
top: 100px;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
left: auto;
width: 8.5em;
right: 2em;
}
div.banner ol {
list-style-type: none;
}
div.fixedBanner {
position: fixed;
top: 20px;
}
</style>
</head>
<body>
<div id="myBanner" class="banner">
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ol>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita
ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita
ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita
ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<script type="text/javascript">
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) {
ele.className += " " + cls;
}
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
setInterval(function () {
var el = document.getElementById('myBanner'),
offset = document.documentElement.scrollTop || document.body.scrollTop;
if (offset > 80) { // = 100 - 20
addClass(el, 'fixedBanner');
} else {
removeClass(el, 'fixedBanner');
}
}, 50);
</script>
</body>
</html>
Is it possible to integrate the stop function into my existing code?!!!
It’s possible, but it’s likely to take some time and effort in order to bring things to a successful completion.
Are you coming to the mechanic for some advice, or do you want the mechanic to do the work for you. If it’s the latter, we have a marketplace where you can have people do the work for you.
As for me, it’s getting very late now and my bed is calling for my attention. All the best.
TEEEEEEEEEEEEEEEEASE! 
Anyone else got any tips for getting either code working?! THANKS
To not leave you completely in the lurch, here’s a jQuery plugin that does the job for you.
Plugin: Smart Sticky Floating Box
Demo: http://plugins.jquery.com/files/stickyfloat_0.htm
Yes, but I don’t like the way that one jerks as you scroll, the one with css and javascript is a lot smoother… how much would it take to implement the feature I am looking for into my code? Any idea? Thanksss
That’s why the plugin has a duration setting. The demo is set for 400 milliseconds, for it to animate its way in to place. You can set the duration to 0 for one that remains fixed in place and is as smooth as a babies bottom.
Actually, when set to 0 it is still jittery. With the code I gave, the menu is absolutely still while scrolling. Just like the menu on this page: http://www.cyberpowerpc.com/system/Xplorer_X7_Xtreme_S1_Notebook/
Can anyone help with this? Thankssssssssssssssssss
You have the code for that from my post, in post #2
The easy-to-implement code is the Smart Sticky FLoating Box and the not-so-easy to implement, but closer to your requirements is in [url=“http://www.sitepoint.com/forums/showpost.php?p=4786303&postcount=2”]post #2
Can either one of those scroll as smooth as the menu on the link I provided… I changed the animation from 400 to 0 and that jquery sample isn’t as smooth as the menu in the link I provided… I’m not sure about the other code if it would be as smooth, but I need it as smooth as the menu I linked to when scrolling - it’s perfectly still no jitter at all.
The exact code that your favorite web site uses is this:
function conf_nav_posit() {
var g = conf_getUIs().formbox;
var e = conf_getUIs().formtabs;
var d = $(window).scrollTop();
var c = conf_getUIs().menubar.height();
d += c;
var a = g.offset().top;
var b = e.offset().top;
var f = 0;
if (d - a >= 0 && a + g.height() - d - e.height() >= 0) {
if ($.browser.msie && $.browser.version < "7") {
f = d - a;
e.css("position", "relative").css("top", f + "px")
} else {
e.css("position", "fixed").css("top", c + "px")
}
} else {
f = a + g.height() - d - e.height() <= 0 ? g.height() - e.height() : 0;
e.css("position", "relative").css("top", f + "px")
}
}
Converting that in to something usable and readable gives you this:
function conf_nav_posit(nav, container, elementAboveContainer) {
var offsetTop = $(elementAboveContainer).height(),
scrollTop = $(window).scrollTop() + offsetTop,
topOfContainer = $(container).offset().top,
navPosition = 0;
if (scrollTop - topOfContainer >= 0 && topOfContainer + $(container).height() - scrollTop - $(nav).height() >= 0) {
if ($.browser.msie && $.browser.version < "7") {
navPosition = scrollTop - topOfContainer;
$(nav).css("position", "relative").css("top", navPosition + "px");
} else {
$(nav).css("position", "fixed").css("top", offsetTop + "px");
}
} else {
navPosition = topOfContainer + $(container).height() - scrollTop - $(nav).height() <= 0 ? $(container).height() - $(nav).height() : 0;
$(nav).css("position", "relative").css("top", navPosition + "px");
}
}
Both of the above are in post #2, so take your pick.
It looks like you took out the name of the div, so I don’t know what to call the div so it utilizes your js, what is the html for this? what’s the div called for this code to work with it? that’s what I don’t know.
For ease of setting up, those elements are passedin as the function parameters.
function conf_nav_posit(nav, container, elementAboveContainer) {
...
}
nav: the navigation element that slides up and down
container: the area inside of which the navigation element slides up and down
elementAboveContainer: the element which the navigation is not allowed to go up above of
It can be anything you like. It your page, your code. You decide.
For example:
<div id="header">
...
</div>
<div id="container">
<div id="sidenav">
...
</div>
<div id="content">
...
</div>
</div>
Where something like this script is used to connect things together.
conf_nav_posit(
document.getElementById('sidenav'),
document.getElementById('container'),
document.getElementById('header')
);
Thanks for all the info but I need someone who knows what they’re doing to write a sample html page… with the parameters keyed in for all the divs, which indicate the starting position from the top of the page and also where to stop at the bottom… am I suppose to specify the height of the container and the nested div just stays inside of that and that’s why it stops at the bottom because it’s the bottom of the container? I hope that’s not how it works… because the pages will be different lengths and I need to use the same code.
I’m afraid that I won’t be able to dedicate my time towards crafting together for you a completely customized solution for you.
If someone else feels like spending their time to do so, then now is the time to jump on in and do the work for you.
Otherwise, there is a mostly acceptable fall-back solution that is easy to get going, in the Smart Sticky Floating Box plugin for jQuery.
Here’s that demo page, where I’ve removed the plugin code and replaced it with scripting code similar to that in post #2.
Feel free to modify it, so that you can work it in to your own page design.
style.css
body {
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: darkred;
text-align: center;
color: #fff;
font-size: 3em;
}
.content {
padding: 10px;
width: 900px;
margin: 0 auto;
background-color: #f1f1f1;
position: relative;
}
.content .text {
height: 1000px;
background-color: #ddd;
margin-left: 250px;
text-align: center;
color: #333;
font-size: 2em;
}
.content .menu {
position: absolute;
float: left;
width: 240px;
height: 450px;
background: green;
text-align: center;
color: #fff;
font-size: 2em;
}
.footer {
height: 500px;
background-color: blue;
text-align: center;
color: #fff;
font-size: 3em;
}
demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>floating menu test</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="fixedSection.js"></script>
<script type="text/javascript">
$(function () {
var updateSection = function () {
var nav = $('.menu'),
container = $('.content'),
elementAboveContainer = $('.header');
fixedSection(nav, container, elementAboveContainer);
};
window.setInterval(updateSection, 50);
});
</script>
</head>
<body>
<div class="header">Header</div>
<div class="content">
<div class="menu">menu</div>
<div class="text">Some text</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
fixedSection.js
function fixedSection(nav, container, elementAboveContainer) {
var offsetTop = $(elementAboveContainer).height(),
scrollTop = $(window).scrollTop() + offsetTop,
topOfContainer = $(container).offset().top,
position = '',
top = 0;
if (scrollTop >= topOfContainer && topOfContainer + $(container).height() >= scrollTop + $(nav).height()) {
if ($.browser.msie && $.browser.version < "8") {
position = 'relative';
top = scrollTop - topOfContainer;
} else {
position = 'fixed';
top = offsetTop + Number($(container).css('padding-top').replace('px', ''));
}
} else {
position = 'relative';
top = topOfContainer + $(container).height() <= scrollTop + $(nav).height() ? $(container).height() - $(nav).height() : 0;
}
$(nav).css({position: position, top: top + 'px'});
}
It doesn’t work, menu doesn’t move at all.
There was an issue with the HTML code that has since been found and fixed.
Don’t give up yet.