2

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 becomes fixed once it hits the top of the page.

Since it completely 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>
Community
  • 1
  • 1
Paul Ruocco
  • 462
  • 3
  • 18

2 Answers2

1

I 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;
pizzarob
  • 11,711
  • 6
  • 48
  • 69
  • We commented at the same time :D - I'm assuming this does the same exact thing as my answer. Tried it and it works. Thanks! – Paul Ruocco Jan 15 '15 at 19:45
1

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>
Paul Ruocco
  • 462
  • 3
  • 18
  • This is actually bringing your scroller anchor 65px up the page, by adding -65 to the ot variable the script is just looking to change the position 65px sooner. – pizzarob Jan 15 '15 at 19:48