I have a fixed header with on my website at 65px tall. I have a secondary navigation about 3/4 down the page that I want to fix to the bottom of my header once scrolled to it.
I've used Josh Lee's answer on this post to get the functionality to work, however, because my header is fixed, the secondary navigation scrolls right past it and bees fixed once it hits the top of the page.
Since it pletely bypasses my header, how can I set an offset for the trigger so that it happens 65px from the top of the screen?
In my <head>:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#mydiv");
if(st > ot) {
s.css({
position: "fixed",
top: "65px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}
</script>
On my page:
<div id="scroller-anchor"></div>
<div id="mydiv" class="">
<ul class="wrap">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
I have a fixed header with on my website at 65px tall. I have a secondary navigation about 3/4 down the page that I want to fix to the bottom of my header once scrolled to it.
I've used Josh Lee's answer on this post to get the functionality to work, however, because my header is fixed, the secondary navigation scrolls right past it and bees fixed once it hits the top of the page.
Since it pletely bypasses my header, how can I set an offset for the trigger so that it happens 65px from the top of the screen?
In my <head>:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#mydiv");
if(st > ot) {
s.css({
position: "fixed",
top: "65px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}
</script>
On my page:
<div id="scroller-anchor"></div>
<div id="mydiv" class="">
<ul class="wrap">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
2 Answers
Reset to default 1I believe you will need to account for the space when you are checking when to change the position to fixed for example change ot variable to
var ot = $("#scroller-anchor").offset().top - 65;
I don't know if this could be considered the "correct" way of solving my problem, but it seemed to have worked for me... I added top:-65px to the scroller-anchor element.
<div id="scroller-anchor" style="top: -65px;"></div>