3

On this dev site I have a bar (blue background) down below that scrolls up as the user scrolls. When it gets to the top, the main nav (white background) moved up and off the page and the blue bar "sticks". It works, but it's very "jumpy" if you scroll slowly. Any ideas how to make this smooth? Here is the jQuery that makes it happen...

<!-- to make sub menu stick to top-->
<script type="text/javascript">
    jQuery(function($) {
        var docked = false;
        var menu = $('.sticky_cta');
        var mainmenu = $('#t3-mainnav');
        var init = menu.offset().top;

        $(window).scroll(function() {       
            if (!docked && (menu.offset().top - $("body").scrollTop() < 50)){
                mainmenu.css({
                     display: "none",
                });
                menu.css({
                    position : "fixed",
                    top: 0,
                });
                docked = true;
            } else if(docked && $("body").scrollTop() <= init) {
                mainmenu.css({
                     display: "block",
                });
                menu.css({
                    position: "relative",
                });
                docked = false;
            }       
        });
    });
</script>
AGE
  • 3,752
  • 3
  • 38
  • 60
user3304303
  • 1,027
  • 12
  • 31
  • I think you can find your answer here http://stackoverflow.com/questions/19497983/parallax-scroll-with-sticky-header – UserNeD May 27 '15 at 18:09
  • You're going to need another way to make the header sticky when you scroll to a certain point. Currently, when you scroll to a certain point, both if statements will begin to switch back and forth (causing the jumpy effect) because the first statement is true and becomes false by turning the variable docked to false which evidently makes the second statement true and then the second statement does its thing and becomes false but turns the first statement true. This goes on for a bit until only one is true without affecting the other. – chdltest May 27 '15 at 18:19
  • Would be easier if you just made it so that the `.sticky_cta` and `#t3-mainnav` has a class added to them with the following styles after you scrolled past a certain point starting from the top. – chdltest May 27 '15 at 18:21

0 Answers0