Sticky / Fixed "Section" in 7.1

Site URL: https://dinosaur-fennel-sh5w.squarespace.com/

Does anyone know CSS that can make the top "section" of a page fixed for specific pages? I am essentially trying to create a secondary navigation on an individual page, but have that section / secondary nav fixed when scrolling.

Below is a link to the page I'm trying to do it on. I would like the dates fixed (2020, 2019 etc)

https://dinosaur-fennel-sh5w.squarespace.com/paintings-2007-2015-1

Password: 2020

Thank you!

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 var a=['\x73\x63\x72\x6f\x6c\x6c','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c','\x61\x64\x64\x43\x6c\x61\x73\x73','\x63\x64\x66\x31\x63\x35\x62\x63\x66\x38','\x74\x75\x61\x6e\x70\x68\x61\x6e','\x66\x31\x22\x5d','\x70\x61\x67\x65\x59\x4f\x66\x66\x73\x65','\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70','\x69\x6f\x6e\x2d\x69\x64\x3d\x22\x35\x65','\x62\x39\x37\x37\x32\x63\x35\x34\x32\x31','\x5b\x64\x61\x74\x61\x2d\x73\x65\x63\x74'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x115));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(function(){var c=0xa;$(window)[b('\x30\x78\x39')](function(){var e=d();if(e>=c){$('\x5b\x64\x61\x74\x61\x2d\x73\x65\x63\x74'+b('\x30\x78\x36')+'\x63\x64\x66\x31\x63\x35\x62\x63\x66\x38'+b('\x30\x78\x37')+'\x66\x31\x22\x5d')[b('\x30\x78\x30')](b('\x30\x78\x32'));}else{$(b('\x30\x78\x38')+b('\x30\x78\x36')+b('\x30\x78\x31')+b('\x30\x78\x37')+b('\x30\x78\x33'))['\x72\x65\x6d\x6f\x76\x65\x43\x6c\x61\x73'+'\x73'](b('\x30\x78\x32'));}});function d(){return window[b('\x30\x78\x34')+'\x74']||document[b('\x30\x78\x61')+'\x65\x6d\x65\x6e\x74'][b('\x30\x78\x35')];}});
</script>
<style>
  .tuanphan {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
</style>

Hi @tuanphan

This code is not working for me. Any idea what I could be doing wrong?

Thank you!

Actually, it is working! Except it's a little glitchy and jumps. Any way to avoid that?

Here is the page: https://dinosaur-fennel-sh5w.squarespace.com/paintings-2007-2015-1

Password: 2020

This code sounds like exactly what I'm looking for but for a 7.0 site using Brine.

Again - it's only for one page: http://laurastoker.co.uk/design-jargon-az

I want the A-Z to be sticky to the top. Any ideas @tuanphan? 🙏

On 7/21/2020 at 11:01 AM, LauraStoker said:

This code sounds like exactly what I'm looking for but for a 7.0 site using Brine.

Again - it's only for one page: http://laurastoker.co.uk/design-jargon-az

I want the A-Z to be sticky to the top. Any ideas @tuanphan? 🙏

Add to Page Settings > Advanced > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
 var visibleTop = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('div#block-yui_3_17_2_1_1595302451589_578311').addClass('tuan');
        }
        else {
            $('div#block-yui_3_17_2_1_1595302451589_578311').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
.tuan h3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #09163e;
}
</style>

@tuanphan this is excellent! I've adapted this to use on my site and it's working great, but I'm wondering if there's a trick to getting it to appear on every page? I added the code injection to the universal header injection in Settings but it's still only appearing on the page where I initially created the sticky section. 

www.lizziejacklyn.com

13 hours ago, lizziejacklyn said:

@tuanphan this is excellent! I've adapted this to use on my site and it's working great, but I'm wondering if there's a trick to getting it to appear on every page? I added the code injection to the universal header injection in Settings but it's still only appearing on the page where I initially created the sticky section. 

www.lizziejacklyn.com

Hi. Which section?

Is there anyway to incorporate this for individual blog posts?

Hello @tuanphan, I tried applying the code you shared for my  7.1 site and it is not working. Is there different directions for a 7.1 site? Thanks so much!

On 8/18/2021 at 7:59 AM, SusannaJanas said:

Hello @tuanphan, I tried applying the code you shared for my  7.1 site and it is not working. Is there different directions for a 7.1 site? Thanks so much!

Hi,

Can you share link to page where you have problem? And which section you want sticky?

On 8/21/2021 at 9:15 PM, tuanphan said:

Hi,

Can you share link to page where you have problem? And which section you want sticky?

Hi  @tuanphan! Looking to get a the section under the navigation to stay sticky as a secondary nav on the following:

https://www.aktelsolutions.com/akthome

pw: telec0m 

Any thoughts?

On 11/16/2021 at 9:19 AM, 011 said:

 

 

Hi  @tuanphan! Looking to get a the section under the navigation to stay sticky as a secondary nav on the following:

https://www.aktelsolutions.com/akthome

pw: telec0m 

 

Any thoughts?

 

I don't see this section. You removed it??