Sticky Menu on Scroll

[jmad 80]

Okay,  I'm still working on this.  After some time and research I came up with the code below and have it in custom scripts.  I tested its returning the offset and distance but the "stick" isn't working.  Can anyone offer a suggestion on how to accomplish this. 

 

.myfixedmenu {

  position: fixed !important;

  top: 0 !important;

}

 

<script>

  

  jQuery(document).ready(function() {

 

var navOffset = jQuery("#naviujfhgdb").offset().top;

    

    jQuery(window).scroll(function() {

      var scrollPos = jQuery(window).scrollTop();

      

      if(scrollPos >= NavOffset) {

        jQuery("#naviujfhgdb").addClass("myfixedmenu");

      } else {

        jQuery("#naviujfhgdb").removeClass("myfixedmenu");

      }

      

      });

      

    

    });

  

  </script>

[Aires 265]

Hi, jmad I am using this plugin on a local site I am working on without any issues so far.

 

https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

 

~Aires

[jmad 80]

Nice.  I'll check it out.  

[jmad 80]

Hmmm.  It worked but then started duplicating the section?  It's possible it doesn't like the Responsive Mobile Menu Plugin I have.  It's a good start though...thanks.

[Aires 265]

jmad

 

Its 2 am and I'm playing with jquery. i manage to get the nav to stick on scroll but I am missing something because it will not unstick. Maybe it will come to me later.

 

Its local but you can see the screencast

 

http://screencast.com/t/jgToOsFYD

 

 

jQuery(document).ready(function() {
        jQuery(window).scroll(function() {
            var s = jQuery("#naviuwgwun6");
            var pos = s.position();    
            var windowpos = jQuery(window).scrollTop();
                  if (windowpos >= pos.top) {
                     s.addClass("stick");
                    } else {
                    s.removeClass("stick"); 
     }
 });
});

 

~Aires

[Aires 265]

BINGO jmad

 

And we have lift off 

 

http://screencast.com/t/LCU3K87kBjez

 

 

JS

 jQuery(document).ready(function() {
    //section id goes here
var  aa = jQuery("#naviuwgwun6");
    //where the magic happens
  jQuery(window).scroll(function() {
    //adjust the number to fit distance from the top of page to the section
  if( jQuery(this).scrollTop() > 720 ) {
    aa.addClass("sticky");
  } else {
    aa.removeClass("sticky");
  }
 });
});

the CSS

.sticky {
  position:fixed;
  top:0px;
  z-index:150;
}

[Aires 265]

The only issue I see is that when the section becomes fixed the content  below it jumps underneath cutting some of the text off because the section is removed from the normal flow so its like the fix area was never there.

 

I am not sure how to fix that... might need to add padding somewhere or something?

 

~Aires 

[jmad 80]

I'll give this a go today.   Thanks.  

[jmad 80]

Works great!  That little jump doesn't really bother me and I don't think most users will notice.  I tried adding some margin to the sticky css but no love.  I'll keep working with it. 

 

This was really helpful as lots of applications like having a clear nav over slider and turning opaque on scroll.  A couple adjustments and this should work for that as well.  Really appreciate the help!

[Aires 265]

Np please share any adjustments you make as it may help me in future projects and will do the same.
Sent from my Windows Phone using Tapatalk

[tjolin+ 18]

Aires , you are awesome man! I have been trying to pull that off for ages. 

Working on a little animation for it to drop down, havent had luck with that though. 

[Aires 265]

Aires , you are awesome man! I have been trying to pull that off for ages. 

Working on a little animation for it to drop down, havent had luck with that though. 

Glad I could help. 

[jmad 80]

@Aires So one thing I just noticed is that on scroll back up the background vanishes instantly instead of fading out.  I've played around with the jquery but still haven't sorted it.  Any recommendation?

[Aires 265]

Is it possible to do a screencast so I can see what you just described.

or an example of what you would like it to do. you can PM me if you like.

Aires