Sticky Second Nav Text to Change color as you scroll to its Page within an Index

Site URL: https://www.wellwomenpsychology.com/

I am very new to coding and squarespace. I just recently published the website. 

I am trying to replicate the same scroll effect as seen on this page on stripe: https://stripe.com/customers#b2b-platforms. As you scroll down the page, the second nav sticks to the top and the nav link becomes active by changing color as you scroll through the correct section of the site. 

Primary Problem #1: So far I have successfully made a second sticky nav under the main banner. The only thing left to do is to have the nav links change color to #46d8cb whenever you press on the nav link or whenever you scroll to the link's page within the Index. It is now day 3 and I am going crazy trying to figure this out. 

From all my research it seems like javasrcript or Jquery are the ways other people have solved this problem. I have tried several javascript "solutions" but none of it worked as I am sure simply cutting and pasting was my problem. But I don't know enough about the language to understand how to manipulate it. 

Problem #2: The sticky nav section does not float above content while scrolling in an ipad, mobile, or safari. It only works on my desktop. I just found this issue as I was writing this and I figured I would include it here to see if anyone knows a quick solution. 

Any help would be greatly greatly appreciated!

Apologies that the code below is all over the place.

Here is the HTML code I injected directly onto the page within the index:

<div id="div1" 
     style="position: absolute; 
            z-index:10000;
            width: 100%;
            padding: 0 !important;
            "
     >

  
<div id="sticky">
<div id="secondary-menu">
  <ul>
    <li>
    <a href="/types-of-therapy/#cognitive-behavior-therapy">Cognitive Behavior Therapy (CBT)</a>
    </li>  
    <li>
    <a href="/types-of-therapy/#dialectical-behavior-therapy">Dialectical Behavior Therapy (DBT) </a>
     </li>  
    <li>
    <a href="/types-of-therapy/#exposure-and-response-prevention">Exposure and Response Prevention (ERP)</a>
    </li> 
    <li>
    <a href="/types-of-therapy/#circle-of-security">Circle of Security Parenting</a>
    </li>  
    <li>
    <a href="/types-of-therapy/#supportive-or-insight-oriented-therapy">Supportive or Insight Oriented Therapy</a>
    </li>  
  </ul>
</div>
</div>
</div>

<script>
  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:0});
  });
</script>

And here is the CSS I added to the style editor:

/*Secondary Menu for Types of Therapy Page*/
#secondary-menu {
 
  border-top: 1px solid rgba(7,96,115,.07); 
  border-bottom: 1px solid rgba(7,96,115,.07); 
  background-color: white;
  
}

#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: center;
}

#secondary-menu li {
  display: inline-block;
  padding: 0 16px;
  text-transform: uppercase;
  font-family: Walsheim Regular;
  font-weight: 600;
  font-size: 18px;
  color: #8898aa;
  transition: color 0.8s;
  text-align: center;
  white-space: normal;
  
}

#secondary-menu li:hover {
  color: #32325d;
}

#secondary-menu li.active-link a  {
  color: #4cdacc !important;
}

#secondary-menu a {
 display: block;
  padding: 25px 0;
  max-width: 170px;
}

#types-of-therapy-content .sqs-block-code {
  width: 100% !important;
}
#types-of-therapy-content .index-page-content {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

For full disclosure, here is the script I copied and pasted into the code injector to make the second nav sticky:

<!-- JQuery script to make the bottom nav bar sticky on the Types of Therpay Page -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
(function($) {var defaults = {topSpacing: 0,bottomSpacing: 0,className: 'is-sticky',wrapperClassName: 'sticky-wrapper',center: false,getWidthFrom: '',responsiveWidth: false},
$window = $(window),$document = $(document),sticked = [],windowHeight = $window.height(),scroller = function() {var scrollTop = $window.scrollTop(),documentHeight = $document.height(),
dwh = documentHeight - windowHeight,extra = (scrollTop > dwh) ? dwh - scrollTop : 0;for (var i = 0; i < sticked.length; i++) {var s = sticked,elementTop = s.stickyWrapper.offset().top,etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {if (s.currentTop !== null) {s.stickyElement.css('width', '').css('position', '').css('top', '');s.stickyElement.trigger('sticky-end', ).parent().removeClass(s.className);s.currentTop = null;}}
else {var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;if (newTop < 0) {newTop = newTop + s.topSpacing;} else {newTop = s.topSpacing;}
if (s.currentTop != newTop) {s.stickyElement.css('width', s.stickyElement.width()).css('position', 'fixed').css('top', newTop);if (typeof s.getWidthFrom !== 'undefined') {s.stickyElement.css('width', $(s.getWidthFrom).width());}
s.stickyElement.trigger('sticky-start', ).parent().addClass(s.className);s.currentTop = newTop;}}}},resizer = function() {windowHeight = $window.height();for (var i = 0; i < sticked.length; i++) {var s = sticked;
if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) {s.stickyElement.css('width', $(s.getWidthFrom).width());}}},
methods = {init: function(options) {var o = $.extend({}, defaults, options);return this.each(function() {var stickyElement = $(this);var stickyId = stickyElement.attr('id');
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName 
var wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);stickyElement.wrapAll(wrapper);if (o.center) {stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});}
if (stickyElement.css("float") == "right") {stickyElement.css({"float":"none"}).parent().css({"float":"right"});}var stickyWrapper = stickyElement.parent();stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({topSpacing: o.topSpacing,bottomSpacing: o.bottomSpacing,stickyElement: stickyElement,currentTop: null,stickyWrapper: stickyWrapper,className: o.className,getWidthFrom: o.getWidthFrom,responsiveWidth: o.responsiveWidth});});},
update: scroller,unstick: function(options) {return this.each(function() {var unstickyElement = $(this);var removeIdx = -1;for (var i = 0; i < sticked.length; i++){if (sticked.stickyElement.get(0) == unstickyElement.get(0))
{removeIdx = i;}}if(removeIdx != -1){sticked.splice(removeIdx,1);unstickyElement.unwrap();unstickyElement.removeAttr('style');}});}};if (window.addEventListener) {window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);} else if (window.attachEvent) {window.attachEvent('onscroll', scroller);window.attachEvent('onresize', resizer);}
$.fn.sticky = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}};
$.fn.unstick = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) {
return methods.unstick.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}};$(function() {setTimeout(scroller, 0);});})(jQuery);
</script>

CookieMonster. 

Incorrect password

@tuanphan, I'm sorry the password did not work. I just published the website. Now there is no password and I included the published link in the post. 

I am still looking for a solution, any guidance you can give me would be very helpful! 

@tuanphan, the page is https://www.wellwomenpsychology.com/types-of-therapy. Thanks again for any help you can provide! 

On 4/28/2020 at 10:41 PM, DoMoreNow said:

@tuanphan, the page is https://www.wellwomenpsychology.com/types-of-therapy. Thanks again for any help you can provide! 

You mean Sticky Get Started button?

@tuanphan, I am not sure what you mean by sticky get started button. If you go to this page: https://www.wellwomenpsychology.com/types-of-therapy, and you begin to scroll down, you will see that there is a second nav that sticks to the top of the page with headings such as Cognitive Behavior Therapy and Dialectical Behavior Therapy etc. 

What I would like the nav to do, is for the font  color to change to #727be6 whenever you are in that section or pressed that button. So for example, if you scroll to the Dialectical Behavior Therapy section, then the second nav bar title called "Dialectical Behavior Therapy" would turn from grey to #727be6. Or, if you click on "Dialectical Behavior Therapy" on the second nav bar and it takes you to that section, then the font of the title in the second nav bar would also be that color #727be6. 

The effect is easiest to understand after visiting this page: https://stripe.com/customers#b2b-platforms, and scrolling through the page to see how their second nav bar works. 

Please let me know if this is still confusing. 

@DoMoreNow I see that you figured it out.  Would you mind sharing what worked for you? I'm trying to do the same thing.

@BTERRY, I am posting series of codes I used to make this work in the hopes that it will be enough to help you. Apologies in advance if its not what you need as I am not a coder. I posted one that went into the code injection section of squarespace and another that went into the actual code inside the types of therapy page. Good luck!

Code that went into Code Injection section: 

<!-- JQuery script to make the bottom nav bar sticky on the Types of Therpay Page -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>
(function($) {var defaults = {topSpacing: 0,bottomSpacing: 0,className: 'is-sticky',wrapperClassName: 'sticky-wrapper',center: false,getWidthFrom: '',responsiveWidth: false},
$window = $(window),$document = $(document),sticked = [],windowHeight = $window.height(),scroller = function() {var scrollTop = $window.scrollTop(),documentHeight = $document.height(),
dwh = documentHeight - windowHeight,extra = (scrollTop > dwh) ? dwh - scrollTop : 0;for (var i = 0; i < sticked.length; i++) {var s = sticked,elementTop = s.stickyWrapper.offset().top,etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {if (s.currentTop !== null) {s.stickyElement.css('width', '').css('position', '').css('top', '');s.stickyElement.trigger('sticky-end', ).parent().removeClass(s.className);s.currentTop = null;}}
else {var newTop = documentHeight - s.stickyElement.outerHeight() - s.topSpacing - s.bottomSpacing - scrollTop - extra;if (newTop < 0) {newTop = newTop + s.topSpacing;} else {newTop = s.topSpacing;}
if (s.currentTop != newTop) {s.stickyElement.css('width', s.stickyElement.width()).css('position', 'fixed').css('top', newTop);if (typeof s.getWidthFrom !== 'undefined') {s.stickyElement.css('width', $(s.getWidthFrom).width());}
s.stickyElement.trigger('sticky-start', ).parent().addClass(s.className);s.currentTop = newTop;}}}},resizer = function() {windowHeight = $window.height();for (var i = 0; i < sticked.length; i++) {var s = sticked;
if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) {s.stickyElement.css('width', $(s.getWidthFrom).width());}}},
methods = {init: function(options) {var o = $.extend({}, defaults, options);return this.each(function() {var stickyElement = $(this);var stickyId = stickyElement.attr('id');
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName 
var wrapper = $('<div></div>').attr('id', stickyId + '-sticky-wrapper').addClass(o.wrapperClassName);stickyElement.wrapAll(wrapper);if (o.center) {stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});}
if (stickyElement.css("float") == "right") {stickyElement.css({"float":"none"}).parent().css({"float":"right"});}var stickyWrapper = stickyElement.parent();stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({topSpacing: o.topSpacing,bottomSpacing: o.bottomSpacing,stickyElement: stickyElement,currentTop: null,stickyWrapper: stickyWrapper,className: o.className,getWidthFrom: o.getWidthFrom,responsiveWidth: o.responsiveWidth});});},
update: scroller,unstick: function(options) {return this.each(function() {var unstickyElement = $(this);var removeIdx = -1;for (var i = 0; i < sticked.length; i++){if (sticked.stickyElement.get(0) == unstickyElement.get(0))
{removeIdx = i;}}if(removeIdx != -1){sticked.splice(removeIdx,1);unstickyElement.unwrap();unstickyElement.removeAttr('style');}});}};if (window.addEventListener) {window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);} else if (window.attachEvent) {window.attachEvent('onscroll', scroller);window.attachEvent('onresize', resizer);}
$.fn.sticky = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}};
$.fn.unstick = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method ) {
return methods.unstick.apply( this, arguments );} else {$.error('Method ' + method + ' does not exist on jQuery.sticky');}};$(function() {setTimeout(scroller, 0);});})(jQuery);
  
  
  $(function(){
    activeLink('pageNav', '.Index-page', 45);
});

function activeLink(navMenuId, sectionsTag, topHeight){
    $(window).scroll(function() {
      
        var position = $(this).scrollTop();
        
        $(sectionsTag).each(function() {
            var target = $(this).offset().top - topHeight;
            var id = $(this).attr('id');
            
            if (position >= target) {
                $('#'+navMenuId+' li').removeClass('active');
                $('#'+navMenuId).find('a[href$="#'+id+'"]').parent().addClass('active');
                  
            }
        });
    });
}
 
</script>
<style>
#pageNav .active a {
  color: #f38a8a;
  border-bottom: 3px solid #f38a8a;
}
</style>

Code that went into the page where you want the effect. 

<div id="div1">

  
<div id="sticky">
<div id="secondary-menu">
  <ul id="pageNav">
    <li>
    <a href="/types-of-therapy/#cognitive-behavior-therapy">Cognitive Behavior Therapy</a>
    </li>  
    <li>
    <a href="/types-of-therapy/#dialectical-behavior-therapy">Dialectical Behavior Therapy</a>
     </li>  
    <li>
    <a href="/types-of-therapy/#exposure-and-response-prevention">Exposure/Response Prevention</a>
    </li> 
    <li>
    <a href="/types-of-therapy/#circle-of-security">Circle of Security</a>
    </li>  
    <li>
    <a href="/types-of-therapy/#supportive-or-insight-oriented-therapy">Supportive/Insight Oriented Therapy</a>
    </li>  
  </ul>
</div>
</div>
</div>

<script>
  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:0});
  });
</script>

5 hours ago, DoMoreNow said:

@BTERRY, I am posting series of codes I used to make this work in the hopes that it will be enough to help you. Apologies in advance if its not what you need as I am not a coder. I posted one that went into the code injection section of squarespace and another that went into the actual code inside the types of therapy page. Good luck!

Code that went into Code Injection section: 

<!-- JQuery script to make the bottom nav bar sticky on the Types of Therpay Page -->

You should use latest jQuery version

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>