Jump to content

How to apply sticky Navigation in Native template?

Recommended Posts

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

Link to comment
  • 2 months later...
  • Replies 7
  • Views 8.7k
  • Created
  • Last Reply

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. :-)

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.

Link to comment

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.

Link to comment
  • 3 months later...

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.

Link to comment
  • 1 year later...
  • 4 months later...
  • 5 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.