Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
mathias

How to apply sticky Navigation in Native template?

Question

I've been trying to get my navigation to stick to the top once it reaches that position. I tried using this solution for a Five template but have had no luck in doing so.

this is where I am:

header:


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

footer code:


<script>
var headerheight = 50; // number of pixels to scroll before applying classes

$(window).bind('scroll', function () {
   if ($(window).scrollTop() > headerheight) {
       $('#navblock-bottom').addClass('sticky-nav');
       $('#content-wrapper').addClass('sticky-nav-gap');
   } else {
       $('navblock-bottom').removeClass('sticky-nav');
       $('#content-wrapper').removeClass('sticky-nav-gap');
   }
});  
</script>

CSS:


.sticky-nav #navblock {
  position: fixed;
  top: 0;
  z-index: 99;
}
.sticky-nav-gap { 
 padding-top: 20px; // height of the navigation 
}

Haven't managed to make it work. Any help is very appreciated. Oh and this is the site i'm working on

Edited by TreyT
retag

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1

I spent some time trying to figure it out too and I finally managed to make it work.I am pretty new at this whole css and javascript thing.. so bare with me.

for my website which you can find (if it's still up) here

I pop these into my Custom css:


#navBlock.fixed{
  width: 100%;
  position: fixed;
  display: block;
  background-color: #ffffff;  //prevent overlapping
  top: 0;
  left: 0;
  z-index: 9999;               //also prevent overlapping
}

On the footer code injection side of things:


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).on('scroll',function(){
  if ($(document).scrollTop() > 243) {
      $('#navBlock').addClass('fixed')
  } else {
      $('#navBlock').removeClass('fixed')
  }

});
</script>

Hope it helps.. i only wrote this because I would love to have found it when i was searching.

Edited by ybudianto
link wasn't shown properly.

Share this post


Link to post
  • 0

Copy and paste into Design > Custom CSS:


/* make nav sticky */#header {  position: fixed;   margin-top: -125px;  z-index: 9999;  background-color: #000;}#page {  margin-top: 125px;}

That should be it. :-) Edited by alxfyv

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

This made all my text go behind my header image and nav bar, which do now stay stationary but now there's a whole other formatting issue of getting the text of the body of the page to begin below the nav bar/header.

Share this post


Link to post
  • 0

I e­­­arn 2­­­5 do­­­llars e­­­very 3­­­0 mi­­­nut­­­es. Wo­­­rk f­­­or just fe­­­w ho­­­urs a­­­nd ha­­­ve l­­­ong­­­er ti­­­me wi­­­th fr­­­iend­­­s an­­­d f­­­ami­­­ly. ­­­for more details check the link below

www.pay-buzz.com

Share this post


Link to post
  • 0

THANK YOU!

Any chance you could help me figure out how to make my footer background the full width of the browser, so that it matches the Nav background?

www.lakewoodplantcompany.com

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...